A utilização da tag base em uma página que contém elementos do marcador SVG não consegue renderizar o marcador
Eu tive um problema ao tentar usar elementos de marcador SVG em uma visualização baseada em SVG. Estou adicionando minhas alterações a um aplicativo da Web que, por acaso, inclui uma tag base em todas as páginas, de modo que qualquer referência a arquivos CSS, arquivos javascript, etc., possa ser relativa.
Eu tenho um código de exemplo abaixo que reproduz o problema. Existe um elemento de linha e um elemento de marcador definido. O elemento marcador é referenciado pela linha em seu atributo 'marker-end', via uri e id of marker. Sem a tag base, a seta é exibida corretamente. Com a tag base, ela não é mostrada. A razão é porque a tag base altera a forma como o navegador resolve URLs. Mesmo para o URL baseado em id simples especificado no atributo marker-end da linha.
Existe alguma maneira de contornar este problema sem ter que remover a tag base?
Eu realmente não posso removê-lo porque o uso dele está bem enraizado no produto em que estou trabalhando. Eu preciso apoiar o Firefox, Chrome e IE9 + para o meu webapp. O Firefox e o Chrome produzem esse problema. IE funciona bem (isto é, exibe marcador de seta).
<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>