Um Hyperlinks zu markieren ist, ähnlich wie in HTML-Dokumenten, das
a-Element zu verwenden.
SVG verwendet die Spezifikation Xlink um Hyperlinks zu definieren.
Dabei sind einfache (simple) Links möglich.
Nachfolgend die wichtigsten Attribute für das a-Element in SVG-Grafiken:
-
xlink:href="URI"
Lokalisierung der anderen Ressource (die geladen werden soll)
-
xlink:title="Zeichenkette"
eine frei wählbare Zeichenfolge zur Betitelung des Hyperlinks
-
xlink:show="new|replace"
legt fest, ob die andere Ressource in einem neuen Browserfenster (new)
oder im aktuellen Browserfenster (replace) geladen werden soll.
-
target="Framebezeichnung"
Legt das Zielfenster (Zielframe) fest, in der die andere Ressource geladen werden soll.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="320px" height="170px" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das a-Element</title>
<desc>Verweise in SVG-Grafiken</desc>
<defs>
<style type="text/css"><![CDATA[
text {font-family:verdana; font-size:16px;}
]]>
</style>
</defs>
<a xlink:href="webseite.html"
xlink:title="Verweis zu einer HTML-Seite">
<rect x="10" y="10" ry="5" width="40" height="40"
style="fill:limegreen; stroke:black;" />
</a>
<a xlink:href="grafik.svg"
xlink:title="Verweis zu einer SVG-Grafik">
<rect x="10" y="60" ry="5" width="40" height="40"
style="fill:mintcream; stroke:black;" />
</a>
<a xlink:href="http://www.w3.org/"
xlink:title="Verweis zu www.w3.org"
xlink:show="new">
<rect x="10" y="110" ry="5" width="40" height="40"
style="fill:chartreuse; stroke:black;" />
</a>
<text x="60" y="40">Verweis zu einer HTML-Seite</text>
<text x="60" y="90">Verweis zu einer SVG-Grafik</text>
<text x="60" y="140">Verweis zu www.w3.org</text>
</svg>
Im obigen Beispiel funktionieren 3 Rechtecke als Hyperlinks.
- Klickt der User auf das erste, grüne Rechteck wird eine HTML-Seite des Namens
webseite.html (die sich im selben Verzeichnis befindet, in der auch die Grafik liegt)
im aktuellen Browserfenster geladen.
- Beim Klick auf das zweite, blaue Rechteck wird eine andere SVG-Grafik des Namens
grafik.svg im aktuellen Browserfenster geladen.
- Das dritte, rote Rechteck verweist auf die Startseite des W3C im Internet.
Diese Seite wird in einem neuen Browserfenster geladen.
|