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>|<length>|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>|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ésentation fill, stroke, stop-color, flood-color et lighting-color. Valeur: <color>|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 depuis SVG 2

Définit le profil de couleur qu'une image bitmap incluse via l'élément <image> doit utiliser. Valeur: auto|sRGB|linearRGB|<name>|<IRI>|inherit; Animation: Oui

color-rendering (en-US)

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>|<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 depuis SVG 2

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>; Animation: Oui

fill-opacity

Définit l'opacité du remplissage de l'élément. Valeur: <number>|<percentage>; 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>|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>; 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>|<percentage>; 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>|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 depuis SVG 2

Contrôle l'orientation des glyphes lorsque la direction en ligne est horizontale. Valeur: <angle>|inherit; Animation: Non

glyph-orientation-vertical (en-US) Obsolète depuis SVG 2

Contrôle l'orientation des glyphes lorsque la direction en ligne est verticale. Valeur: auto|<angle>|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 depuis SVG 2

Indique au navigateur s'il doit ajuster l'espacement entre les glyphes. Valeur: auto|<length>|inherit; Animation: Oui

letter-spacing (en-US)

Contrôle l'espacement entre les caratères du texte. Valeur: normal|<length>|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>; 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>|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>|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>|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>; 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>; 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-width utilisé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>; Animation: Oui

stroke-width

Définit l'épaisseur du contour appliqué à une forme. Valeur: <length>|<percentage>; 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>; 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