<a>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Das <a> SVG-Element erstellt einen Hyperlink zu anderen Webseiten, Dateien, Positionen auf derselben Seite, E-Mail-Adressen oder einer anderen URL. Es ist dem <a>-Element in HTML sehr ähnlich.
Das <a>-Element in SVG ist ein Container, was bedeutet, dass Sie einen Link um Text (wie in HTML), aber auch um jede Form erstellen können.
Verwendungskontext
| Kategorien | Container-Element |
|---|---|
| Erlaubter Inhalt | Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Formelemente Strukturelemente Gradient-Elemente <a>, <clipPath>, <filter>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> |
Attribute
download-
Instruieren Sie Browser, anstelle der Navigation zu einer URL diese herunterzuladen, sodass der Benutzer aufgefordert wird, sie als lokale Datei zu speichern. Wertetyp: <string>; Standardwert: none; Animierbar: no
href-
Die URL oder URL-Fragment, auf das der Hyperlink verweist. Wertetyp: <URL>; Standardwert: none; Animierbar: yes
hreflang-
Die menschliche Sprache der URL oder des URL-Fragments, auf die bzw. das der Hyperlink verweist. Wertetyp: <string>; Standardwert: none; Animierbar: no
pingExperimentell-
Eine durch Leerzeichen getrennte Liste von URLs, an die, wenn der Hyperlink gefolgt wird,
POST-Anfragen mit dem BodyPINGvom Browser (im Hintergrund) gesendet werden. Typischerweise für Tracking verwendet. Für ein breiter unterstütztes Feature, das denselben Anwendungsfall abdeckt, sieheNavigator.sendBeacon(). Wertetyp: <list-of-URLs>; Standardwert: none; Animierbar: no referrerpolicy-
Welcher Referrer gesendet werden soll, wenn die URL abgerufen wird. Wertetyp:
no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url; Standardwert: none; Animierbar: no rel-
Die Beziehung des Zielobjekts zum Linkobjekt. Wertetyp: <list-of-Link-Types>; Standardwert: none; Animierbar: no
target-
Wo die verlinkte URL angezeigt werden soll. Wertetyp:
_self|_parent|_top|_blank| <XML-Name>; Standardwert:_self; Animierbar: yes type-
Ein MIME-Typ für die verlinkte URL. Wertetyp: <string>; Standardwert: none; Animierbar: no
xlink:hrefVeraltet-
Die URL oder das URL-Fragment, auf das der Hyperlink verweist. Möglicherweise zur Rückwärtskompatibilität für ältere Browser erforderlich. Wertetyp: <URL>; Standardwert: none; Animierbar: yes
DOM-Schnittstelle
Dieses Element implementiert die SVGAElement-Schnittstelle.
Beispiel
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- A link around a shape --> <a href="/docs/Web/SVG/Reference/Element/circle"> <circle cx="50" cy="40" r="35" /> </a> <!-- A link around a text --> <a href="/docs/Web/SVG/Reference/Element/text"> <text x="50" y="90" text-anchor="middle"><circle></text> </a> </svg> /* As SVG does not provide a default visual style for links, it's considered best practice to add some */ @namespace svg url("http://www.w3.org/2000/svg"); /* Necessary to select only SVG <a> elements, and not also HTML's. See warning below */ svg|a:link, svg|a:visited { cursor: pointer; } svg|a text, text svg|a { fill: blue; /* Even for text, SVG uses fill over color */ text-decoration: underline; } svg|a:hover, svg|a:active { outline: dotted 1px blue; } Warnung: Da dieses Element seinen Tag-Namen mit dem HTML-<a>-Element teilt, kann das Auswählen von a mit CSS oder querySelector möglicherweise auf die falsche Art von Element zutreffen. Versuchen Sie, die @namespace-Regel zu verwenden, um die beiden zu unterscheiden.
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # AElement |
Browser-Kompatibilität
Siehe auch
xlink:title-Attribut- HTML
<a>-Element