Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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'attributstroke-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
html,body,svg { height: 100%;}<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 |