stroke-dasharray
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 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,2sera équivalent à5,3,2,5,3,2.
Spécifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # StrokeDashing |
Compatibilité des navigateurs
Chargement…