<defs>
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.
Das <defs>-Element SVG wird verwendet, um grafische Objekte zu speichern, die zu einem späteren Zeitpunkt genutzt werden. Objekte, die innerhalb eines <defs>-Elements erstellt werden, werden nicht direkt gerendert. Um sie anzuzeigen, müssen Sie diese referenzieren (zum Beispiel mit einem <use>-Element).
Grafische Objekte können von überall referenziert werden. Die Definition dieser Objekte innerhalb eines <defs>-Elements fördert jedoch das Verständnis des SVG-Inhalts und ist vorteilhaft für die allgemeine Zugänglichkeit des Dokuments.
Verwendungskontext
| Kategorien | Container-Element, Strukturelement |
|---|---|
| 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
Dieses Element enthält nur globale Attribute.
DOM-Schnittstelle
Dieses Element implementiert die SVGDefsElement-Schnittstelle.
Beispiel
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- Some graphical objects to use --> <defs> <circle id="myCircle" cx="0" cy="0" r="5" /> <linearGradient id="myGradient" gradientTransform="rotate(90)"> <stop offset="20%" stop-color="gold" /> <stop offset="90%" stop-color="red" /> </linearGradient> </defs> <!-- using my graphical objects --> <use x="5" y="5" href="#myCircle" fill="url('#myGradient')" /> </svg> Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # Head |