<a>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das <a> SVG Element erstellt einen Hyperlink zu anderen Webseiten, Dateien, Positionen auf derselben Seite, E-Mail-Adressen oder einer beliebigen anderen URL. Es ist dem <a> Element von HTML sehr ähnlich.

Das <a> Element von SVG ist ein Container, was bedeutet, dass Sie einen Link um Text (wie in HTML), aber auch um jede Form herum erstellen können.

Beispiel

@namespace svg url(http://www.w3.org/2000/svg);
html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- A link around a shape -->
  <a href="/docs/Web/SVG/Element/circle">
    <circle cx="50" cy="40" r="35" />
  </a>

  <!-- A link around a text -->
  <a href="/docs/Web/SVG/Element/text">
    <text x="50" y="90" text-anchor="middle">&lt;circle&gt;</text>
  </a>
</svg>

css

/* 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 denselben Tag-Namen wie das HTML <a> Element teilt, könnte das Auswählen von a mit CSS oder querySelector auf die falsche Art von Element angewendet werden. Versuchen Sie, die @namespace Regel zu verwenden, um die beiden zu unterscheiden.

Attribute

download: Weist Browser an, eine URL herunterzuladen, anstatt sie zu öffnen, sodass der Benutzer aufgefordert wird, sie als lokale Datei zu speichern. Wertetyp: <string> ; Standardwert: none; Animierbar: nein
href: Die URL oder URL-Fragment, auf das der Hyperlink zeigt. Wertetyp: <URL> ; Standardwert: none; Animierbar: ja
hreflang: Die menschliche Sprache der URL oder des URL-Fragments, auf das der Hyperlink zeigt. Wertetyp: <string> ; Standardwert: none; Animierbar: nein
ping Experimentell: Eine durch Leerzeichen getrennte Liste von URLs, zu denen, wenn der Hyperlink gefolgt wird, POST Anfragen mit dem Körper PING vom Browser (im Hintergrund) gesendet werden. Typischerweise für das Tracking verwendet. Für eine weiter verbreitete Funktion, die dieselben Anwendungsfälle adressiert, siehe Navigator.sendBeacon(). Wertetyp: <list-of-URLs> ; Standardwert: none; Animierbar: nein
referrerpolicy: Welcher Referrer gesendet wird, 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: nein
rel: Die Beziehung des Zielobjekts zum Linkobjekt. Wertetyp: <list-of-Link-Types> ; Standardwert: none; Animierbar: nein
target: Wo die verlinkte URL angezeigt werden soll. Wertetyp: _self|_parent|_top|_blank|<XML-Name> ; Standardwert: _self; Animierbar: ja
type: Ein MIME-Typ für die verlinkte URL. Wertetyp: <string> ; Standardwert: none; Animierbar: nein
xlink:href Veraltet: Die URL oder das URL-Fragment, auf den der Hyperlink zeigt. Kann für die Rückwärtskompatibilität mit älteren Browsern erforderlich sein. Wertetyp: <URL> ; Standardwert: none; Animierbar: ja

Verwendungskontext

Kategorien	Container-Element
Erlaubter Inhalt	Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Formelemente Strukturelemente Gradient-Elemente `<a>`, `<clipPath>`, `<cursor>`, `<filter>`, `<font>`, `<font-face>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # AElement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

xlink:title Attribut
HTML <a> Element