Attributs SVG de présentation
Brouillon
Cette page n'est pas terminée.
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
- 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
- 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
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
- 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-color
etlighting-color
.
Valeur: <color>|inherit
; Animation: Oui color-interpolation
- 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
- 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
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
- Indique au navigateur comment optimiser ses opérations d'interpolation et de composition des couleurs.
Valeur:auto
|optimizeSpeed
|optimizeQuality
|inherit
; Animation: Oui cursor
- Spécifie le curseur affiché lorsque la souris passe au-desuss de l'élément.
Valeur: <FuncIRI>|<keywords>|inherit
; Animation: Oui direction
- Spécifie la direction d'écriture du texte.
Valeur:ltr
|rtl
|inherit
; Animation: Oui display
- Permet de contrôler le rendu d'éléments graphiques ou conteneurs.
Valeur: see cssdisplay
; Animation: Oui dominant-baseline
- 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
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
- Applique un filtre, définit par un élément
<filter>
, à l'élément.
Valeur: <FuncIRI>|none
|inherit
; Animation: Oui flood-color
- 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
- 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
- Indique la police utiliser pour restituer le texte de l'élément.
Valeur: see cssfont-family
; Animation: Oui font-size
- Spécifie la taille de la police.
Valeur: see cssfont-size
; Animation: Oui font-size-adjust
- 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
- Sélectionne la version normale, condensée ou espacée d'une police.
Valeur: see cssfont-stretch
; Animation: Oui font-style
- Spécifie si la police doit être stylisée en normal, italique ou oblique.
Valeur:normal
|italic
|oblique
; Animation: Oui font-variant
- Spécifie si une police doit utiliser certaines variations, telles que les petites majuscules ou les ligatures.
Valeur: see cssfont-variant
; Animation: Oui font-weight
- 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
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
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
- Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des images.
Valeur:auto
|optimizeQuality
|optimizeSpeed
; Animation: Oui kerning
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
- Contrôle l'espacement entre les caratères du texte.
Valeur:normal
|<length>|inherit
; Animation: Oui lighting-color
- Définit la couleur de la source de lumière pour les filtres
<feDiffuseLighting>
et<feSpecularLighting>
.
Valeur: <color>; Animation: Oui marker-end
- 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
- 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
- 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 cssmask
; Animation: Oui opacity
- Spécifie l'opacité d'un objet ou d'un groupe d'objets.
Valeur: <opacity-value>; Animation: Oui overflow
- 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
- 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
- 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
- Indique la couleur à utiliser sur un
<stop>
d'un dégradé.
Valeur:currentColor
|<color>|<icccolor>|inherit
; Animation: Oui stop-opacity
- 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
- Définit l'apparence des lignes décoratives sur le texte.
Valeur:none
|underline
|overline
|line-through
|blink
|inherit
; Animation: Oui text-rendering
- 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
- -
Valeur:; Animation: - vector-effect
- Spécifie l'effet vectoriel à utiliser lors du dessin d'un objet.
Valeur:default
|non-scaling-stroke
|inherit
|<uri>
; Animation: Oui visibility
- Définit la visibilité d'éléments graphiques.
Valeur:visible
|hidden
|collapse
|inherit
; Animation: Oui word-spacing
- Définit la longueur des espaces entre les mots d'un texte.
Valeur: <length>|inherit
; Animation: Oui writing-mode
- 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
Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.