Использование базового тега на странице, содержащей элементы маркера SVG, не позволяет отобразить маркер
Я столкнулся с проблемой при попытке использовать элементы маркера SVG в визуализации на основе SVG. Я добавляю свои изменения в веб-приложение, которое включает в себя базовый тег на каждой странице, так что любые ссылки на файлы CSS, файлы JavaScript и т. Д. Могут быть относительными.
У меня есть пример кода ниже, который воспроизводит проблему. Существует линейный элемент и определенный элемент маркера. На элемент маркера ссылается строка в его атрибуте marker-end, через uri и id маркера. Без базового тега стрелка отображается нормально. С базовым тегом он не отображается. Причина в том, что базовый тег изменяет способ, которым браузер разрешает URL-адреса .. даже для простого URL-адреса на основе идентификатора, указанного в атрибуте marker-end строки.
Есть ли способ обойти эту проблему, не удаляя базовый тег?
Я не могу действительно удалить это, потому что использование этого довольно укоренилось в продукте, над которым я работаю. Мне нужно поддерживать Firefox, Chrome и IE9 + для моего веб-приложения. Firefox и Chrome оба создают эту проблему. IE работает нормально (т. Е. Отображается стрелка маркера).
<html>
<head>
<base href=".">
<style>
.link { stroke: #999; stroke-opacity: .6; }
marker#arrow { fill: black; }
</style>
</head>
<body>
<svg width="100%" height="100%">
<defs>
<marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto">
<path d="M0,-5L10,0L0,5"></path>
</marker>
</defs>
<line x1="100" y1="100" x2="333" y2="333" marker-start="url(#arrow)" class="link"></line>
</svg>
</body>
</html>