Hinweis

Aufgrund technischer Probleme ist unser Forum im Moment nicht erreichbar. Wir bitten um Verständnis und hoffen auf Beseitigung der Schwierigkeiten bis spätestens Montag, 25.6. Unser Blog und unser Wiki sind nach wie vor auch im Moment verfügbar.

SVG/Elemente/Verweise

Aus SELFHTML-Wiki
< SVG‎ | Elemente(Weitergeleitet von Referenzieren in SVG)
Wechseln zu: Navigation, Suche

Hyperlinks werden in SVG wie in HTML mit dem a-Element ausgezeichnet. Wie auch bei anderen XML-Dialekten üblich, wird die Referenzierung in SVG1.1 und SVGTiny per XLink spezifiziert. In SVG 2 wird das Referenzieren mit dem in der HTML-Welt üblichen href eingeführt.

Das Thema Verweise in Internetseiten ist recht komplex und wird deshalb in diesem Wiki auch an weiteren Stellen und in anderen Zusammenhängen bearbeitet.


Referenzieren in SVG[Bearbeiten]

href-Attribut in SVG 2[Bearbeiten]

In SVG2 wird die Referenzierung mit XLink durch die in HTML gebräuchliche mit dem href-Attribut ersetzt.[1]

  • SVG 2
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Leer

Folgende Angaben sind möglich:

Beachten Sie: Das in HTML mögliche title-Attribut ist nicht Teil der Spezifikation; Sie können jedoch mit den title oder desc-Elementen inhaltliche Hinweise geben.

XLink:href in SVG1.1[Bearbeiten]

In SVG 1.1. wurden Hyperlinks per XLink spezifiziert.

  • SVG 1.0
  • SVG 1.1
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

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]

Beachten Sie: In Standalone-SVG-Dokumenten ist neben einer Angabe des SVG-Namespaces auch der des XLink-Namespaces notwendig:
Beispiel
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">



Empfehlung: Geben Sie bei Ihren Projekten beide Varianten an, um bei einem möglichen Entfernen der alten Version durch die Browser-Hersteller gerüstet zu sein.

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
  <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>
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 Sie den unteren Stern nicht sehen können, ist der Text zwar sichtbar, aufgrund des nicht unterstützten href-Attributs aber kein aktiver Link.

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

Beispiel ansehen …
a use {fill: #09c; stroke: #09c;} a:hover use {fill: skyblue; stroke: skyblue;} a text {fill: #09c; text-decoration: underline;} a:hover text {fill: skyblue; }
Durch CSS werden für text innerhalb von a-Elementen blaue Textfarbe und Unterstreichung mit text-decoration: underline festgelegt. So ist der Verweis auch als solcher erkennbar.
Beachten Sie: In HTML verwenden die Browser für Textlinks browserspezifische Einstellungen wie z.B. eine blaue Unterstreichung. Dies müssen Sie in SVG erst im CSS oder Style-Attribut angeben.

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]

  1. W3C: SVG 2 (TR): Links
  2. svgwg: XLinkTitleAttribute

Referenz[Bearbeiten]