SVG/Element/a

Aus SELFHTML-Wiki
< SVG‎ | Element
Wechseln zu: Navigation, Suche

Das a-Element in SVG erzeugt wie das gleichnamige HTML-Element einen Hyperlink. Sie können beliebig viele grafische Objekte, Text in SVG-Text-Elementen und auch Bilder in image-Elementen zwischen die a-Tags setzen.
Siehe auch Referenzieren in SVG

Syntax
Start-Tag: notwendig
End-Tag: notwendig
Elternelemente
Darf vorkommen in:
jedem Element, das fließenden Inhalt erlaubt.
außer a-Element
erlaubte Inhalte
jedes Element, das im Eltern-Element erlaubt ist
Attribute
Name Inhalt Standardwert Bedeutung
href CDATA Die URI des Ziels. - Es wird ein "Uniform Resource Identifier" erwartet: URI
rel CDATA
systemLanguage IANA-Länderkürzel überprüft die Spracheinstellungen des Benutzers
target CDATA
transform CDATA
Xlink:href CDATA Die URI des Ziels. - Es wird ein "Uniform Resource Identifier" erwartet: URI

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel 
  <a xlink:href="//wiki.selfhtml.org/wiki/SVG/Tutorials"
     xlink:title="zurück zum Wiki-Artikel">
	<text x="140" y="60">zurück zum Wiki-Artikel (mit XLink:href)</text>
  </a>

  <a href="//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>
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.
Siehe: Anwendungsbeispiel (unten auf der Seite)

Referenzieren in SVG

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

Browserunterstützung
caniuse.com

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.
Hinweis:
Das href-Attribut wird (Stand: August 2019) von allen Browsern (sogar IE9-11) verstanden - einzige Ausnahme bilden ältere Versionen des Safari-Browsers (iOS <12).

XLink:href in SVG1.1

Wie auch bei anderen XML-Dialekten üblich, wurde die Referenzierung von Hyperlinks in SVG1.1 und SVGTiny per XLink spezifiziert.

Browserunterstützung
caniuse.com

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


Anwendungsbeispiel

Beispiel ansehen …
  <a xlink:href="//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="//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>

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

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.
Beachten Sie: Dem href-Attribut muss bei SVG1.1 ein xlink: vorangestellt werden! Mittlerweile verstehen aber alle modernen Browser (selbst IE9-11) die kürzere Variante href.

Siehe auch

Weblinks

  1. ↑ W3C: SVG 2 (TR): Links
  2. ↑ svgwg: XLinkTitleAttribute
Grundformen
Abgerufen von „http://wiki.selfhtml.org/index.php?title=SVG/Element/a&oldid=99924“