L'attribut stroke-dasharray contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés. 

Note: Comme il s'agit d'un attribut de présentation, stroke-dasharray peut aussi être utilisé directement dans une feuille de style CSS.

Les éléments suivants peuvent utiliser l'attribut stroke-dasharray: <altGlyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, and <tspan>

Exemple

<svg viewBox="0 0 30 10" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <line                                  x1="0" y1="1" x2="30" y2="1" stroke="black" />
    <line stroke-dasharray="4"             x1="0" y1="3" x2="30" y2="3" stroke="black" />
    <line stroke-dasharray="4, 1"          x1="0" y1="5" x2="30" y2="5" stroke="black" />
    <line stroke-dasharray="4, 1, 2"       x1="0" y1="7" x2="30" y2="7" stroke="black" />
    <line stroke-dasharray="4, 1, 2, 3"    x1="0" y1="9" x2="30" y2="9" stroke="black" />
</svg>

Contexte d'usage

Catégories Attribut de présentation
Valeur none | <dasharray> | inherit
Animable Oui
Document normatif SVG 1.1 (2nd Edition)
<dasharray>
Il s'agit d'une liste de mesures <length> et <percentage> séparées par des virgules ou des espaces blancs. Ils permettent de spécifier la longeur de l'alternance entre segments et vides. Si un nombre impair de valeurs est entré, alors la liste sera répartie afin de créer un nombre pair de valeurs par répétition. Ainsi, 5,3,2 sera rendu comme 5,3,2,5,3,2.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Compatibilité inconnue  
Compatibilité inconnue

Spécification

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de 'stroke-dasharray' dans cette spécification.
Candidat au statut de recommandation Définition pour les formes et textes
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'stroke-dasharray' dans cette spécification.
Recommendation Définition initiale pour les formes et textes

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt, AlexisColin
Dernière mise à jour par : a-mt,