<defs>
SVG permet de définir des objets graphiques (génériques) pour une utilisation ultérieure. Autant qu'il est possible, cet usage est recommandé grâce aux propriétés offertes par l'élément defs
.
Ainsi définir ces éléments au sein de l'élément defs
promeut une meilleure compréhension du contenu SVG par l'homme et donc son accessibilité.
Les éléments définis grâce à defs
ne sont jamais directement générés (au sens du rendu graphique : ils ne sont pas affichés). Vous devez utiliser l'élément <use>
pour leur-s utilisation-s lorsque vous le souhaitez au sein du viewport
.
Contexte d'usage
Catégories | Élément conteneur, Élément structurel |
---|---|
Contenu autorisé | Tout élément de cette liste, quel qu'en soit l'ordre : Éléments d'animation Éléments descriptifs Éléments de formes Éléments structurels Éléments de dégradés <a> , <clipPath> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view> |
Exemple
<svg width="80px" height="30px" viewBox="0 0 80 30"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient01">
<stop offset="20%" stop-color="#39F" />
<stop offset="90%" stop-color="#F3F" />
</linearGradient>
</defs>
<rect x="10" y="10" width="60" height="10"
fill="url(#Gradient01)" />
</svg>
Attributs
Attributs globaux
Attributs spécifiques
Il ne dispoe pas d'attributs spécifiques.
Interface avec DOM
Cet élément est implémenté par l'interface SVGDefsElement
.
Spécifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # Head |
Compatibilité des navigateurs
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.