Die Verwendung des Basis-Tags auf einer Seite mit SVG-Markierungselementen kann die Markierung nicht rendern

Question

Aug 15, 2013, 08:16 PM

Die Verwendung des Basis-Tags auf einer Seite mit SVG-Markierungselementen kann die Markierung nicht rendern

Beim Versuch, SVG-Markierungselemente in einer SVG-basierten Visualisierung zu verwenden, ist ein Problem aufgetreten. Ich füge meine Änderungen einer Webanwendung hinzu, die zufällig ein Basis-Tag auf jeder Seite enthält, sodass alle Verweise auf CSS-Dateien, Javascript-Dateien usw. relativ sein können.

Ich habe einige Beispielcode unten, der das Problem reproduziert. Es ist ein Linienelement und ein Markierungselement definiert. Das marker-Element wird durch die Zeile in seinem Attribut 'marker-end' über uri und id von marker referenziert. Ohne das Basis-Tag wird der Pfeil gut angezeigt. Mit dem Basis-Tag wird es nicht angezeigt. Der Grund dafür ist, dass das Base-Tag die Art und Weise ändert, in der der Browser URLs auflöst. Dies gilt auch für die einfache id-basierte URL, die im marker-end-Attribut der Zeile angegeben ist.

Kann ich dieses Problem umgehen, ohne das Basis-Tag entfernen zu müssen?

Ich kann es nicht wirklich entfernen, da die Verwendung in dem Produkt, an dem ich arbeite, ziemlich tief verwurzelt ist. Ich muss Firefox, Chrome und IE9 + für meine Webanwendung unterstützen. Sowohl Firefox als auch Chrome verursachen dieses Problem. IE funktioniert gut (dh Pfeilmarkierungsanzeigen).

<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>

Zu kommentieren