SVG/Elemente/Verweise
Hyperlinks werden in SVG wie in HTML mit dem a-Element ausgezeichnet.
Inhaltsverzeichnis
Referenzieren in SVG[Bearbeiten]
In SVG2 wurde die Referenzierung mit XLink durch die in HTML gebräuchliche mit dem href-Attribut ersetzt.[1]
Details: caniuse.com
Folgende Angaben sind möglich:
-
href
: weist die URI des Verweisziels zu -
target
: legt ein Zielfenster für Verweise fest.
Hinweis
Da das xlink:href bestimmt nicht entfernt wird, da sonst eine Vielzahl älterer Seiten unbrauchbar würden, ist es empfehlenswert, vorerst noch die eigentlich obsolete Variante zu verwenden.--Matthias Scharwies (Diskussion) 17:20, 1. Aug. 2019 (CEST)
XLink:href in SVG1.1[Bearbeiten]
Wie auch bei anderen XML-Dialekten üblich, wurde die Referenzierung von Hyperlinks in SVG1.1 und SVGTiny per XLink spezifiziert.
Dabei sind einfache (simple) Links möglich.
Folgende Angaben sind möglich:
-
Xlink:href
: weist die URI des Verweisziels zu -
Xlink:title
: "Zeichenkette" mit inhaltlichem Hinweis
Die fünf weiteren XLink-Attribute: ‘xlink:type’, ‘xlink:role’, ‘xlink:arcrole’, ‘xlink:show’ und ‘xlink:actuate’ werden in SVG nicht verwendet![2]
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
Anwendungsbeispiel[Bearbeiten]
<a xlink:href="//wiki.selfhtml.org/wiki/SVG/Elemente/Verweise"
xlink:title="zurück zum Wiki-Artikel">
<use xlink:href="#star" x="10" y="10" />
<text x="140" y="60">zurück zum Wiki-Artikel (mit XLink:href)</text>
</a>
<a href="//wiki.selfhtml.org/wiki/SVG/Elemente/Verweise">
<use href="#star" x="10" y="110" />
<text x="140" y="160">zurück zum Wiki-Artikel (mit href)</text>
</a>
"normale" Textlinks[Bearbeiten]
Das obige Beispiel enthält neben der geometrischen Struktur ein text-Element. Im Unterschied zum Linktext innerhalb von HTML-Links besitzt dieses aber ohne weitere Festlegung nur die Standardeinstellungen, sodass der Text nicht als Verweis erkennbar ist.
text
innerhalb von a
-Elementen blaue Textfarbe und Unterstreichung mit text-decoration: underline
festgelegt. So ist der Verweis auch als solcher erkennbar.grafische Links[Bearbeiten]
Ähnlich wie in HTML5 können Sie in SVG beliebig viele Kindelemente, auch image-Elemente, zwischen die a-Tags setzen.
Quellen[Bearbeiten]
- ↑ W3C: SVG 2 (TR): Links
- ↑ svgwg: XLinkTitleAttribute
- css-tricks: On xlink:href being deprecated in SVG 30.07.2018
Xlink:href
referenziert - der untere benutzt dashref
-Attribut.Wenn Sie den unteren Stern nicht sehen können, ist der Text zwar sichtbar, aufgrund des nicht unterstützten
href
-Attributs aber kein aktiver Link.