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. 

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

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.

Exemple

<?xml version="1.0"?>
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <line stroke-dasharray="5, 5"              x1="10" y1="10" x2="190" y2="10" />
    <line stroke-dasharray="5, 10"             x1="10" y1="30" x2="190" y2="30" />
    <line stroke-dasharray="10, 5"             x1="10" y1="50" x2="190" y2="50" />
    <line stroke-dasharray="5, 1"              x1="10" y1="70" x2="190" y2="70" />
    <line stroke-dasharray="1, 5"              x1="10" y1="90" x2="190" y2="90" />
    <line stroke-dasharray="0.9"               x1="10" y1="110" x2="190" y2="110" />
    <line stroke-dasharray="15, 10, 5"         x1="10" y1="130" x2="190" y2="130" />
    <line stroke-dasharray="15, 10, 5, 10"     x1="10" y1="150" x2="190" y2="150" />
    <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
    <line stroke-dasharray="5, 5, 1, 5"        x1="10" y1="190" x2="190" y2="190" />

<style><![CDATA[
line{
    stroke: black;
    stroke-width: 2;
}
]]></style>
</svg>

Éléments

Les éléments suivants peuvent utiliser l'attribut stroke-dasharray :

Étiquettes et contributeurs liés au document

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