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)