SVG/Elemente/Verweise

Aus SELFHTML-Wiki
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.

Inhaltsverzeichnis

[Bearbeiten] Referenzieren in SVG

[Bearbeiten] href-Attribut in SVG 2

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.

[Bearbeiten] XLink:href in SVG1.1

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
Beachten Sie: Die fünf weiteren XLink-Attribute: ‘xlink:type’, ‘xlink:role’, ‘xlink:arcrole’, ‘xlink:show’ und ‘xlink:actuate’ werden in SVG nicht verwendet![2]
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.

[Bearbeiten] Anwendungsbeispiel

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.

[Bearbeiten] "normale" Textlinks

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.

[Bearbeiten] grafische Links

Ähnlich wie in HTML5 können Sie in SVG beliebig viele Kindelemente, auch image-Elemente, zwischen die a-Tags setzen.

[Bearbeiten] Quellen

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

[Bearbeiten] Referenz

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML