<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 jeder anderen URL. Es ist dem <a> Element von 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: Weist Browser an, eine URL herunterzuladen, anstatt zu ihr zu navigieren, 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 das der Hyperlink verweist. Wertetyp: <string>; Standardwert: none; Animierbar: no
interestfor Experimentell Nicht standardisiert: Definiert das <a> Element als Interest Invoker. Sein Wert ist die id eines Ziel-Elements, das in irgendeiner Weise beeinträchtigt wird (normalerweise angezeigt oder verborgen), wenn Interesse am Invoker-Element gezeigt oder verloren wird (zum Beispiel durch Überfahren/Verlassen oder Fokussieren/Entfokussieren). Siehe Using interest invokers für weitere Details und Beispiele. Wertetyp: <string>; Standardwert: none; Animierbar: no
ping Experimentell: Eine durch Leerzeichen getrennte Liste von URLs, an die, wenn der Hyperlink gefolgt wird, POST Anfragen mit dem Körper PING vom Browser (im Hintergrund) gesendet werden. Üblicherweise für Tracking verwendet. Für eine breiter unterstützte Funktion, die dieselben Anwendungsfälle abdeckt, siehe Navigator.sendBeacon(). Wertetyp: <list-of-URLs>; Standardwert: none; Animierbar: no
referrerpolicy: Welchen Referrer man senden 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:href Veraltet: Die URL oder das URL-Fragment, auf das der Hyperlink verweist. Möglicherweise für die Abwärtskompatibilität mit älteren Browsern erforderlich. Wertetyp: <URL>; Standardwert: none; Animierbar: yes

DOM-Schnittstelle

Dieses Element implementiert die SVGAElement-Schnittstelle.

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 seinen Tag-Namen mit HTML's <a> Element teilt, kann das Auswählen von a mit CSS oder querySelector auf den falschen Elementtyp angewendet werden. Versuchen Sie die Regel @namespace, um zwischen den beiden zu unterscheiden.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # AElement

Browser-Kompatibilität

Siehe auch

xlink:title Attribut
HTML <a> Element

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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