<a>

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Das SVG-Element <a> ist ein Container. Daher können Sie einen Link nicht nur um Text (wie in HTML), sondern auch um beliebige Formen legen.

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: Weist Browser an, eine URL herunterzuladen, statt sie aufzurufen. Benutzer werden dadurch aufgefordert, die Ressource als lokale Datei zu speichern. Werttyp: <string>; Standardwert: keiner; Animierbar: nein
href: Die URL oder das URL-Fragment, auf die bzw. das der Hyperlink verweist. Werttyp: <URL>; Standardwert: keiner; Animierbar: ja
hreflang: Die menschliche Sprache der URL oder des URL-Fragments, auf die bzw. das der Hyperlink verweist. Werttyp: <string>; Standardwert: keiner; Animierbar: nein
interestfor: Definiert das <a>-Element als Interest Invoker. Sein Wert ist die id eines Zielelements, das auf irgendeine Weise beeinflusst wird (normalerweise eingeblendet oder ausgeblendet), wenn Interesse am Invoker-Element gezeigt wird oder verloren geht (beispielsweise durch Bewegen des Mauszeigers darüber bzw. davon weg oder durch Fokussieren bzw. Aufheben des Fokus). Weitere Informationen und Beispiele finden Sie unter Interest Invoker verwenden. Werttyp: <string>; Standardwert: keiner; Animierbar: nein
ping: Eine durch Leerzeichen getrennte Liste von URLs, an die der Browser beim Aufrufen des Hyperlinks im Hintergrund POST-Anfragen mit dem Inhalt PING sendet. Wird üblicherweise für Tracking verwendet. Eine breiter unterstützte Funktion für dieselben Anwendungsfälle ist Navigator.sendBeacon(). Werttyp: <list-of-URLs>; Standardwert: keiner; Animierbar: nein
referrerpolicy: Welcher Referrer beim Abrufen der URL gesendet wird. Werttyp: no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url; Standardwert: keiner; Animierbar: nein
rel: Die Beziehung zwischen dem Zielobjekt und dem Linkobjekt. Werttyp: <list-of-Link-Types>; Standardwert: keiner; Animierbar: nein
target: Wo die verlinkte URL angezeigt wird. Werttyp: _self | _parent | _top | _blank | <XML-Name>; Standardwert: _self; Animierbar: ja
type: Ein MIME-Typ für die verlinkte URL. Werttyp: <string>; Standardwert: keiner; Animierbar: nein
xlink:href: Die URL oder das URL-Fragment, auf die bzw. das der Hyperlink verweist. Kann für die Abwärtskompatibilität mit älteren Browsern erforderlich sein. Werttyp: <URL>; Standardwert: keiner; Animierbar: ja

DOM-Schnittstelle

Dieses Element implementiert die Schnittstelle SVGAElement.

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/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">&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-Element <a> hat, kann die Auswahl von a mit CSS oder querySelector den falschen Elementtyp erfassen. Verwenden Sie die Regel @namespace, um die beiden zu unterscheiden.

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # Links

Browser-Kompatibilität

Siehe auch

Attribut xlink:title
HTML-Element <a>

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden