href

Das href-Attribut definiert einen Link zu einer Ressource als Referenz-URL. Die genaue Bedeutung dieses Links hängt vom Kontext des jeweiligen Elements ab, das es verwendet.

Hinweis: Spezifikationen vor SVG 2 definierten ein xlink:href-Attribut, das durch das href-Attribut nun obsolet geworden ist. Wenn Sie ältere Browserversionen unterstützen müssen, kann das veraltete xlink:href-Attribut als Fallback zusätzlich zum href-Attribut genutzt werden, z. B. <use href="some-id" xlink:href="some-id" x="5" y="5" />.

Sie können dieses Attribut mit folgenden SVG-Elementen verwenden:

Beispiel

html
<svg viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg">
  <a href="https://developer.mozilla.org/">
    <text x="10" y="25">MDN Web Docs</text>
  </a>
</svg>

In SVG

a

Für <a> definiert href den Ort des referenzierten Objekts, ausgedrückt als URL-Referenz.

Wert <url>
Standardwert Keiner
Animierbar Ja

animate, animateMotion, animateTransform, set

Für <animate>, <animateMotion>, <animateTransform> und <set> definiert href eine URL, die auf das Element verweist, das Ziel dieses Animationselements ist und daher im Laufe der Zeit modifiziert wird.

Die URL muss genau auf ein Ziel-Element zeigen, das als Ziel des gegebenen Animationselements geeignet ist. Zeigt die URL auf mehrere Ziel-Elemente, wenn das angegebene Ziel-Element nicht als Ziel für das gegebene Animationselement geeignet ist oder wenn das Ziel-Element nicht Teil des aktuellen Dokuments ist, wird das Animationselement kein Ziel-Element beeinflussen. Dennoch wird das Animationselement weiterhin normal in Bezug auf seine Zeitsteuerungseigenschaften funktionieren. Insbesondere werden TimeEvents gesendet und das Animationselement kann wie gewohnt als Synchronisationsbasis verwendet werden, als ob die URL auf ein gültiges Ziel-Element verweist.

Wenn das href-Attribut oder das veraltete xlink:href-Attribut nicht angegeben ist, wird das unmittelbare übergeordnete Element des aktuellen Animationselements das Ziel-Element sein. Wenn sowohl xlink:href als auch href angegeben werden, wird der Wert des letzteren Attributs verwendet.

Beziehen Sie sich auf die Beschreibungen der einzelnen Animationselemente für Einschränkungen hinsichtlich der Typen von Elementen, die Ziele bestimmter Animationstypen sein können.

Abgesehen von den ausdrücklich in dieser Spezifikation genannten SVG-spezifischen Regeln erfolgt die normative Definition für dieses Attribut in der SMIL-Animationsspezifikation. Siehe insbesondere SMIL Animation: Specifying the animation target.

Wert <url>
Standardwert Keiner
Animierbar Nein

feImage

Für <feImage> definiert href eine URL, die auf eine Bildressource oder ein Element verweist. Wenn sowohl xlink:href als auch das href-Attribut angegeben werden, überschreibt letzteres das erstere.

Wert <url>
Standardwert Keiner
Animierbar Ja

image

Für <image> definiert href eine URL, die auf das anzuzeigende Bild verweist.

Wert <url>
Standardwert Keiner
Animierbar Ja
html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <image href="fxlogo.png" x="0" y="0" height="100" width="100" />
</svg>

linearGradient/radialGradient

Für <linearGradient> oder <radialGradient> definiert href eine URL, die auf ein Vorlage-Gradienten-Element verweist; um gültig zu sein, muss der Verweis auf ein anderes <linearGradient>- oder <radialGradient>-Element zeigen.

Wert <url>
Standardwert Keiner
Animierbar Ja

mpath

Für <mpath> definiert href eine URL, die auf das <path>-Element oder die Grundform verweist, die den Bewegungsweg definiert.

Wert <url>
Standardwert Keiner
Animierbar Nein

pattern

Für <pattern> definiert href eine URL, die auf ein anderes <pattern>-Element innerhalb des aktuellen SVG-Dokuments verweist. Alle Attribute, die auf dem referenzierten Element definiert sind, aber nicht auf diesem Element, werden von diesem Element geerbt. Falls dieses Element keine Kinder hat, das referenzierte Element jedoch schon (möglicherweise aufgrund seines eigenen href-Attributs), dann erbt dieses Element die Kinder des referenzierten Elements. Die Vererbung kann indirekt bis zu einer beliebigen Ebene erfolgen; wenn das referenzierte Element Attribute oder Kinder aufgrund seines eigenen href-Attributs erbt, kann das aktuelle Element diese Attribute oder Kinder ebenfalls erben. Auf dem <pattern>-Element ist das href-Attribut animierbar.

Wert <url>
Standardwert Keiner
Animierbar Ja

script

Für <script> definiert href eine URL, die auf eine externe Ressource mit dem Skriptcode verweist.

Wert <url>
Standardwert Keiner
Animierbar Nein

textPath

Für <textPath> definiert href eine URL, die auf das <path>-Element oder die Grundform verweist, auf der der Text gerendert wird, wenn kein path-Attribut angegeben ist. Auf dem <textPath>-Element ist das href-Attribut animierbar.

Wert <url>
Standardwert Keiner
Animierbar Ja

use

Für <use> definiert href eine URL, die auf ein Element oder Fragment innerhalb eines SVG-Dokuments verweist, das geklont werden soll.

Das <use>-Element kann auf ein gesamtes SVG-Dokument verweisen, indem ein href-Wert ohne Fragment angegeben wird. Solche Verweise gelten als Verweise auf das Wurzelelement des referenzierten Dokuments.

Wert <url>
Standardwert Keiner
Animierbar Ja

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# AElementHrefAttribute
SVG Animations Level 2
# HrefAttribute
Filter Effects Module Level 1
# element-attrdef-feimage-href
Scalable Vector Graphics (SVG) 2
# ImageElementHrefAttribute
Scalable Vector Graphics (SVG) 2
# LinearGradientElementHrefAttribute
SVG Animations Level 2
# MPathElementHrefAttribute
Scalable Vector Graphics (SVG) 2
# PatternElementHrefAttribute
Scalable Vector Graphics (SVG) 2
# RadialGradientElementHrefAttribute
Scalable Vector Graphics (SVG) 2
# ScriptElementHrefAttribute
Scalable Vector Graphics (SVG) 2
# TextPathElementHrefAttribute
Scalable Vector Graphics (SVG) 2
# UseElementHrefAttribute

Browser-Kompatibilität

svg.elements.a.href

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
href

Legend

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

Full support
Full support

svg.elements.animate.href

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
href

Legend

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

Full support
Full support

svg.elements.animateMotion.href

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
href

Legend

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

Full support
Full support

svg.elements.animateTransform.href

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
href

Legend

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

Full support
Full support

svg.elements.feImage.href

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
href

Legend

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

Full support
Full support
See implementation notes.

svg.elements.image.href

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
href

Legend

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

Full support
Full support

svg.elements.linearGradient.href

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
href

Legend

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

Full support
Full support

svg.elements.mpath.href

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
href

Legend

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

Full support
Full support

svg.elements.pattern.href

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
href

Legend

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

Full support
Full support

svg.elements.radialGradient.href

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
href

Legend

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

Full support
Full support

svg.elements.script.href

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
href

Legend

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

Full support
Full support

svg.elements.set.href

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
href

Legend

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

Full support
Full support

svg.elements.textPath.href

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
href

Legend

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

Full support
Full support
See implementation notes.

svg.elements.use.href

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
href

Legend

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

Full support
Full support

Siehe auch