stroke-dasharray
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
L'attribut stroke-dasharray
est un attribut de présentation qui définit le motif des traits et des espaces utilisés pour dessiner le contour de la forme.
Note :
Étant un attribut de présentation, stroke-dasharray
peut être utilisé comme propriété CSS.
Cet attribut peut être utilisé avec les éléments SVG suivants :
Exemple
<svg viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
<!-- Pas de tirets ou d'espaces -->
<line x1="0" y1="1" x2="30" y2="1" stroke="black" />
<!-- Traits et espaces de même taille -->
<line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" />
<!-- Traits et espaces de tailles différentes -->
<line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" />
<!-- Traits et espaces de tailles différentes avec un nombre impair de valeurs -->
<line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" />
<!-- Traits et espaces de tailles différentes avec un nombre pair de valeurs -->
<line
x1="0"
y1="9"
x2="30"
y2="9"
stroke="black"
stroke-dasharray="4 1 2 3" />
<!-- Traits commençant par un espace -->
<line
x1="0"
y1="11"
x2="30"
y2="11"
stroke="black"
stroke-dasharray="0 4 0" />
</svg>
Notes d'utilisation
Valeur | none | <dasharray> |
---|---|
Valeur par défaut | none |
Peut être animé | Oui |
<dasharray>
-
Une liste de valeurs
<length>
et<percentage>
, séparées par des espaces ou des virgules, qui indiquent les longueurs alternées des traits et des espaces.Si un nombre impair de valeurs est fourni, la liste est répétée afin d'obtenir un nombre pair de valeur. Ainsi,
5,3,2
sera équivalent à5,3,2,5,3,2
.
Spécifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # StrokeDashing |
Compatibilité des navigateurs
BCD tables only load in the browser