El uso de la etiqueta base en una página que contiene elementos de marcador SVG no puede generar el marcador
Me he encontrado con un problema al intentar usar elementos marcadores SVG en una visualización basada en SVG. Estoy agregando mis cambios a una aplicación web que incluye una etiqueta base en cada página, de modo que cualquier referencia a los archivos CSS, archivos javascript, etc. puede ser relativa.
Tengo un código de ejemplo a continuación que reproduce el problema. Hay un elemento de línea, y un elemento marcador definido. El elemento marcador se hace referencia a la línea en su atributo 'marcador-fin', a través de uri y la identificación del marcador. Sin la etiqueta de base, la flecha se muestra bien. Con la etiqueta base, no se muestra. La razón es porque la etiqueta base cambia la forma en que el navegador resuelve las urls ... incluso para la url simple basada en id especificada en el atributo de final de marcador de la línea.
¿Hay alguna manera de evitar este problema sin tener que quitar la etiqueta base?
Realmente no puedo eliminarlo porque su uso está bastante arraigado en el producto en el que estoy trabajando. Necesito ser compatible con Firefox, Chrome e IE9 + para mi aplicación web. Firefox y Chrome producen este problema. IE funciona bien (es decir, muestra un marcador de flecha).
<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>