Verlinkung
Das target Attribut auf dem SVG <a> Element funktioniert in Mozilla Firefox 1.5 nicht. Wenn SVG-Dokumente innerhalb eines übergeordneten HTML-Dokuments mit dem Tag eingebettet werden:
page1.html:
<html lang="en">
<body>
<p>This is a SVG button:</p>
<object
width="100"
height="50"
type="image/svg+xml"
data="button.svg"></object>
</body>
</html>
button.svg:
<?xml version="1.1" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<a href="page2.html" target="_top">
<g>
<!-- button graphical elements here -->
</g>
</a>
</svg>
Die Spezifikation besagt, dass der Browser zum HTML-Dokument page2.html navigieren sollte, wenn auf die Schaltflächengrafiken geklickt wird. Allerdings funktioniert target nicht mit Mozillas Implementierung des SVG <a> Elements in Firefox 1.5. (Das Problem wird in Firefox 2.0 behoben.)
Das resultierende Verhalten in Moz SVG ist, dass page2.html in dem Frame geladen wird, in dem sich die SVG-Schaltfläche befand (d.h. Sie hätten jetzt page2.html eingebettet in einem 100x50 Pixel großen Frame innerhalb von page1.html).
Um dies zu umgehen, ist ein wenig unschönes JavaScript-Hacking erforderlich:
button.svg:
<?xml version="1.1" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<g onclick="top.document.href='page2.html'" cursor="pointer">
<!-- button graphical elements here -->
</g>
</svg>
Beispiel
Ein Beispiel für diese Lösung in Aktion finden Sie unter www.codedread.com.