Attributs SVG de présentation
Les attributs SVG de présentation sont des propriétés CSS pouvant être utilisées comme attributs sur les éléments SVG
- alignment-baseline
- baseline-shift
- clip
- clip-path
- clip-rule
- color
- color-interpolation
- color-interpolation-filters
- color-profile
- color-rendering
- cursor
- direction
- display
- dominant-baseline
- enable-background
- fill
- fill-opacity
- fill-rule
- filter
- flood-color
- flood-opacity
- font-family
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-variant
- font-weight
- glyph-orientation-horizontal
- glyph-orientation-vertical
- image-rendering
- kerning
- letter-spacing
- lighting-color
- marker-end
- marker-mid
- marker-start
- mask
- opacity
- overflow
- pointer-events
- shape-rendering
- solid-color
- solid-opacity
- stop-color
- stop-opacity
- stroke
- stroke-dasharray
- stroke-dashoffset
- stroke-linecap
- stroke-linejoin
- stroke-miterlimit
- stroke-opacity
- stroke-width
- text-anchor
- text-decoration
- text-rendering
- transform
- unicode-bidi
- vector-effect
- visibility
- word-spacing
- writing-mode
Attributs
alignment-baseline (en-US)-
Spécifie comment un objet est aligné sur la ligne de pied de la police par rapport à son parent. Valeur:
auto|baseline|before-edge|text-before-edge|middle|central|after-edge|text-after-edge|ideographic|alphabetic|hanging|mathematical|inherit; Animation: Oui baseline-shift (en-US)-
Permet de positionner la ligne de pied de l'élément par rapport à celle de son parent. Valeur:
auto|baseline|super|sub|<percentage> (en-US)|<length> (en-US)|inherit; Animation: Oui clip (en-US)Obsolète-
Définit quelle partie d'un élément est visible. Valeur:
auto|<shape>|inherit; Animation: Oui clip-path-
Associe un chemin de détourage
<clipPath>à l'élément. Valeur:none|<FuncIRI> (en-US)|inherit; Animation: Oui clip-rule (en-US)-
Indique la règle de remplissage à appliquer sur un élément
<clipPath>. Valeur:nonezero|evenodd|inherit; Animation: Oui color-
Définit la valeur potentielle (valeur de
currentColor) pour les attributs de présentationfill,stroke,stop-color,flood-coloretlighting-color. Valeur: <color> (en-US)|inherit; Animation: Oui color-interpolation (en-US)-
Spécifie l'espace colométrique pour les interpolations de dégradés, les animations couleur et composition alpha. Valeur:
auto|sRGB|linearRGB|inherit; Animation: Oui color-interpolation-filters (en-US)-
Spécifie l'espace colométrique pour les opérations effectuées via des effets de filtre. Valeur:
auto|sRGB|linearRGB|inherit; Animation: Oui color-profile (en-US)Obsolète-
Définit le profil de couleur qu'une image bitmap incluse via l'élément
<image>doit utiliser. Valeur:auto|sRGB|linearRGB|<name> (en-US)|<IRI> (en-US)|inherit; Animation: Oui color-rendering-
Indique au navigateur comment optimiser ses opérations d'interpolation et de composition des couleurs. Valeur:
auto|optimizeSpeed|optimizeQuality|inherit; Animation: Oui cursor (en-US)-
Spécifie le curseur affiché lorsque la souris passe au-desuss de l'élément. Valeur: <FuncIRI> (en-US)|<keywords>|
inherit; Animation: Oui direction (en-US)-
Spécifie la direction d'écriture du texte. Valeur:
ltr|rtl|inherit; Animation: Oui display (en-US)-
Permet de contrôler le rendu d'éléments graphiques ou conteneurs. Valeur: see css
display; Animation: Oui dominant-baseline (en-US)-
Définit la ligne de pied utilisée pour aligner le texte. Valeur:
auto|text-bottom|alphabetic|ideographic|middle|central|mathematical|hanging|text-top; Animation: Oui enable-background (en-US)Obsolète-
Indique au navigateur comment gérer l'image d'arrière plan. Valeur:
accumulate|new|inherit; Animation: Non fill-
Définit la couleur de remplissage d'un élément graphique. Valeur: <paint> (en-US); Animation: Oui
fill-opacity-
Définit l'opacité du remplissage de l'élément. Valeur: <number> (en-US)|<percentage> (en-US); Animation: Oui
fill-rule-
Indique comment déterminer quelles parties du chemin se trouvent à l'intérieur de la forme. Valeur:
nonzero|evenodd|inherit; Animation: Oui filter (en-US)-
Applique un filtre, définit par un élément
<filter>, à l'élément. Valeur: <FuncIRI> (en-US)|none|inherit; Animation: Oui flood-color (en-US)-
Indique quelle couleur utiliser pour remplir la région du filtre, définit par les éléments
<feFlood>ou<feDropShadow>. Valeur: <color> (en-US); Animation: Oui flood-opacity (en-US)-
Indique l'opacité à utiliser pour remplir la région du filtre, définit par les éléments
<feFlood>ou<feDropShadow>. Valeur: <number> (en-US)|<percentage> (en-US); Animation: Oui font-family (en-US)-
Indique la police utiliser pour restituer le texte de l'élément. Valeur: see css
font-family; Animation: Oui font-size (en-US)-
Spécifie la taille de la police. Valeur: see css
font-size; Animation: Oui font-size-adjust (en-US)-
Spécifie que la taille de la police doit être choisit en se basant sur la taille des lettres minuscules et non des majuscules. Valeur: <number> (en-US)|
none|inherit; Animation: Oui font-stretch (en-US)-
Sélectionne la version normale, condensée ou espacée d'une police. Valeur: see css
font-stretch; Animation: Oui font-style (en-US)-
Spécifie si la police doit être stylisée en normal, italique ou oblique. Valeur:
normal|italic|oblique; Animation: Oui font-variant (en-US)-
Spécifie si une police doit utiliser certaines variations, telles que les petites majuscules ou les ligatures. Valeur: see css
font-variant; Animation: Oui font-weight (en-US)-
Spécifie l'épaisseur (ou graisse) de la police. Valeur:
normal|bold|lighter|bolder|100|200|300|400|500|600|700|800|900; Animation: Oui glyph-orientation-horizontal (en-US)Obsolète-
Contrôle l'orientation des glyphes lorsque la direction en ligne est horizontale. Valeur: <angle> (en-US)|
inherit; Animation: Non glyph-orientation-vertical (en-US)Obsolète-
Contrôle l'orientation des glyphes lorsque la direction en ligne est verticale. Valeur:
auto|<angle> (en-US)|inherit; Animation: Non image-rendering (en-US)-
Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des images. Valeur:
auto|optimizeQuality|optimizeSpeed; Animation: Oui kerning (en-US)Obsolète-
Indique au navigateur s'il doit ajuster l'espacement entre les glyphes. Valeur:
auto|<length> (en-US)|inherit; Animation: Oui letter-spacing (en-US)-
Contrôle l'espacement entre les caratères du texte. Valeur:
normal|<length> (en-US)|inherit; Animation: Oui lighting-color (en-US)-
Définit la couleur de la source de lumière pour les filtres
<feDiffuseLighting>et<feSpecularLighting>. Valeur: <color> (en-US); Animation: Oui marker-end (en-US)-
Définit la pointe de la flèche ou polymarker dessiné à la fin de l'élément
<path>ou ou de la forme. Valeur: <FuncIRI> (en-US)|none|inherit; Animation: Oui marker-mid (en-US)-
Définit la pointe de la flèche ou polymarker dessiné entre chaque segment de l'élément
<path>ou de la forme. Valeur: <FuncIRI> (en-US)|none|inherit; Animation: Oui marker-start (en-US)-
Définit la pointe de la flèche ou polymarker dessiné au début de l'élément
<path>ou ou de la forme. Valeur: <FuncIRI> (en-US)|none|inherit; Animation: Oui mask-
Modifie la visibilité d'un élément en masquant ou détourant l'image à des endroits spécifiques. Valeur: see css
mask; Animation: Oui opacity (en-US)-
Spécifie l'opacité d'un objet ou d'un groupe d'objets. Valeur: <opacity-value> (en-US); Animation: Oui
overflow (en-US)-
Spécifie si le contenu d'un élément bloc est tronqué lorsqu'il déborde de la zone de l'élément. Valeur:
visible|hidden|scroll|auto|inherit; Animation: Oui pointer-events (en-US)-
Définit si et quand un élément peut être la cible d'un événement de la souris. Valeur:
bounding-box|visiblePainted|visibleFil|visibleStroke|visible|painted|fill|stroke|all|none; Animation: Oui shape-rendering (en-US)-
Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des éléments
<path>et des formes. Valeur:auto|optimizeSpeed|crispEdges|geometricPrecision|inherit; Animation: Oui solid-color-
- Valeur:; Animation: -
solid-opacity-
- Valeur:; Animation: -
stop-color (en-US)-
Indique la couleur à utiliser sur un
<stop>d'un dégradé. Valeur:currentColor|<color>|<icccolor>|inherit; Animation: Oui stop-opacity (en-US)-
Indique l'opacité du
<stop>. Valeur: <opacity-value>|inherit; Animation: Oui stroke-
Définit la couleur à utiliser pour le contour de l'élément. Valeur: <paint> (en-US); Animation: Oui
stroke-dasharray-
Définit le motif des pointillés utilisé pour dessiner le contour de la forme. Valeur:
none|<dasharray>; Animation: Oui stroke-dashoffset-
Décale la position de départ des pointillés. Valeur: <percentage>|<length>; Animation: Oui
stroke-linecap-
Définit la forme de la fin des lignes. Valeur:
butt|round|square; Animation: Oui stroke-linejoin-
Définit la manière de dessiner la liaison entre deux segments de ligne. Valeur:
arcs|bevel|miter|miter-clip|round; Animation: Oui stroke-miterlimit-
Définit la limite du rapport entre la longueur du coin et la valeur de
stroke-widthutilisée pour dessiner la liaison entre deux segments de ligne. Valeur: <number>; Animation: Oui stroke-opacity-
Définit l'opacité du contour d'une forme. Valeur: <opacity-value>|<percentage> (en-US); Animation: Oui
stroke-width-
Définit l'épaisseur du contour appliqué à une forme. Valeur: <length> (en-US)|<percentage> (en-US); Animation: Oui
text-anchor-
Définit l'alignement vertical d'une chaîne de texte. Valeur:
start|middle|end|inherit; Animation: Oui text-decoration (en-US)-
Définit l'apparence des lignes décoratives sur le texte. Valeur:
none|underline|overline|line-through|blink|inherit; Animation: Oui text-rendering (en-US)-
Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu du texte. Valeur:
auto|optimizeSpeed|optimizeLegibility|geometricPrecision|inherit; Animation: Oui transform-
Définit une liste de transformations à appliquer à un élément et à ses enfants. Valeur: <transform-list> (en-US); Animation: Oui
unicode-bidi (en-US)-
- Valeur:; Animation: -
vector-effect (en-US)-
Spécifie l'effet vectoriel à utiliser lors du dessin d'un objet. Valeur:
default|non-scaling-stroke|inherit|<uri>; Animation: Oui visibility (en-US)-
Définit la visibilité d'éléments graphiques. Valeur:
visible|hidden|collapse|inherit; Animation: Oui word-spacing (en-US)-
Définit la longueur des espaces entre les mots d'un texte. Valeur: <length>|
inherit; Animation: Oui writing-mode (en-US)-
Spécifie si la direction d'un élément
<text>doit être de gauche-à-droite, droite-à-gauche, ou de haut-en-bas. Valeur:lr-tb|rl-tb|tb-rl|lr|rl|tb|inherit; Animation: Oui
Compatibilité des navigateurs
BCD tables only load in the browser