SVG/Elemente/a
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.
Inhaltsverzeichnis
Referenzieren in SVG
In SVG2 wurde die Referenzierung mit XLink durch die in HTML gebräuchliche mit dem href-Attribut ersetzt.[1]
Details: caniuse.com
Folgende Angaben sind möglich:
-
href: weist die URI des Verweisziels zu -
target: legt ein Zielfenster für Verweise fest.
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.
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]
In Standalone-SVG-Dokumenten ist neben einer Angabe des SVG-Namespaces auch der des XLink-Namespaces notwendig:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<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/Elemente/Verweise">
<use href="#star" x="10" y="110" />
<text x="140" y="160">zurück zum Wiki-Artikel (mit href)</text>
</a>
Siehe auch
- SVG/Tutorials/Text (Gestaltung von Textlinks in SVG)
- HTML/Tutorials/Links
Weblinks
- W3C: AElement
- css-tricks: On xlink:href being deprecated in SVG 30.07.2018
- ↑ W3C: SVG 2 (TR): Links
- ↑ svgwg: XLinkTitleAttribute
| Syntax | Start-Tag: notwendig End-Tag: notwendig <a>…</a> |
|---|---|
| Elternelemente | Darf vorkommen in:
jedem Element, das fließenden Inhalt erlaubt. |
| erlaubte Inhalte |
jedes Element, das im Eltern-Element erlaubt ist |
| 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]
<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>
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.
text innerhalb von a-Elementen blaue Textfarbe und Unterstreichung mit text-decoration: underline festgelegt. So ist der Verweis auch als solcher erkennbar.
Siehe: Anwendungsbeispiel (unten auf der Seite)