<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.

* 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 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

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# AElement

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
a
download
href
hreflang
ping
Experimental
referrerpolicy
no-referrer-when-downgrade
origin-when-cross-origin
unsafe-url
rel
systemLanguage
target
type
xlink:actuate
Deprecated
xlink:href
Deprecated
xlink:show
Deprecated
xlink:title
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.

Siehe auch