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 Eléments de dégradés <a>, <altGlyphDef>, <clipPath>, <color-profile>, <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
- Conditional processing attributes »
- Core attributes »
- Graphical event attributes »
- Presentation attributes »
classstyleexternalResourcesRequiredtransform
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
| Spécification | Status | Commentaire |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 La définition de '<defs>' dans cette spécification. |
Candidat au statut de recommandation | |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) La définition de '<defs>' dans cette spécification. |
Recommendation | Initial definition |
Compatibilité avec les navigateurs
Nous convertissons les données de compatibilité dans un format JSON.
Ce tableau de compatibilité utilise encore l'ancien format
car nous n'avons pas encore converti les données qu'il contient.
Vous pouvez nous aider en contribuant !
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.5 (1.8) | 9.0 | 8.0 | 3.0.4 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 3.0 | 1.0 (1.8) | Pas de support | (Oui) | 3.0.4 |
The chart is based on these sources.