Beispiel:SVG-element-a.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:Grundlayout.css">
<title>Referenzieren in SVG</title>
<style>
a use {fill: #09c; stroke: #09c;}
a text {fill: #09c; text-decoration: underline;}
a:hover use {fill: skyblue; stroke: skyblue;}
a:hover text {fill: skyblue; }
</style>
</head>
<body>
Referenzieren in SVG
<svg viewBox="0 0 900 200"> <defs>
<path id="star" d="m60,72 l5.9-17.8 l-14-10.2 h17.4 l5.8-17 5.8,17 h17 l-14,10 l6,18 l-15,-11 z" />
</defs>
<a xlink:href="https://wiki.selfhtml.org/wiki/SVG/Element/a" 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="https://wiki.selfhtml.org/wiki/SVG/Element/a">
<use href="#star" x="10" y="110" /> <text x="140" y="160">zurück zum Wiki-Artikel (mit href)</text>
</a>
</svg>
Das SVG-Markup enthält zwei Verweise mit je einem Stern (einem referenzierten use-Element) und einem Text. Der obere Verweis ist mit Xlink:href referenziert - der untere benutzt das href-Attribut.
Wenn du den unteren Stern nicht sehen kannst, ist der Text zwar sichtbar, aufgrund des nicht unterstützten href-Attributs aber kein aktiver Link.
</body> </html>
