SVG/Elemente/a

Aus SELFHTML-Wiki
< SVG‎ | Elemente(Weitergeleitet von Referenzieren in SVG)
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.

Referenzieren in SVG

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

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

Details: 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).
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

Wie auch bei anderen XML-Dialekten üblich, wurde die Referenzierung von Hyperlinks in SVG1.1 und SVGTiny 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">
Beispiel
  <a xlink:href="//wiki.selfhtml.org/wiki/SVG/Elemente/Verweise"
     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/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.
Siehe: Anwenungsbeispiel (unten auf der Seite)
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
Start-Tag: notwendig
End-Tag: notwendig
<a>…</a>
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

Browsersupport Details: {{{caniuse}}}
Attribute
Name Inhalt Standardwert Bedeutung
Kernattribute
class ID ordnet ein Element einer oder mehreren Klassen zu.
id ID identifiziert ein einziges Element innerhalb eines Dokuments
lang ID identifiziert eine Sprachangabe
style ID CDATA Stilangabe durch Präsentationsattribute
tabindex ID macht Element „antabbbar“
xml:base CDATA Basis-URL
xml:lang Sprachkürzel legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766]
xml:space default, preserve Verhalten gegenüber whitespace)


Präsentationsattribute
alignment-baseline
baseline-shift
clip
clip-path
clip-rule
color
cursor
cx (SVG2)
cy (SVG2)
direction
display
dominant-baseline
filter
flood-color
flood-opacity
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
glyph-orientation-horizontal
glyph-orientation-vertical
height (SVG2)
isolation
letter-spacing
lighting-color
mask
opacity
overflow
pointer-events
r (SVG2)
rx (SVG2)
ry (SVG2)
text-anchor
text-decoration
unicode-bidi
visibility
word-spacing
writing-mode
width (SVG2)
x (SVG2)
y (SVG2)


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

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.