`Stroke-dasharray` - Propriété CSS

stroke-dasharray

Résumé des caractéristiques de la propriété `stroke-dasharray`

Description rapide

Définit les caractéristiques d'un pointillé (en SVG).

Statut

Standard

S'applique à

Formes SVG.

Utilisable sur

SVG

Valeurs prédéfinies

none

Pourcentages

Calculés par rapport à la moyenne largeur-hauteur du viewport.

Valeur initiale

none

Héritée par défaut

Oui.

Type d'animation

Computed value : lors d'une animation, la propriété stroke-dasharray passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Traits et remplissages

Références (W3C)

🡇

🡅

CSS Fill and Stroke Module Level 3

Statut du document: WD (document de travail)

Scalable Vector Graphics (SVG)

Statut du document: CR (document candidat à la recommandation)

Scalable Vector Graphics (SVG)

Statut du document: REC (recommandation)

Schéma de la syntaxe de `stroke-dasharray`.

Schéma syntaxique de la propriété stroke-dasharray.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description des termes utilisés sur le schéma :

length est une valeur numérique positive, suivie d'une des unités de dimension.
% est un pourcentage résultant en une dimension.
Un nombre quelconque de valeurs peut être spécifié, en les séparant par un espace.

Description de la propriété `stroke-dasharray`.

La propriété stroke-dasharray définit les paramètre d'un pointillé : longueur des segments et longueur des espaces. stroke-dasharray s'applique à des tracés en SVG, que ce soit des tracés rectilignes ou des courbes.

Comme son nom l'indique, la propriété attend un série de valeurs.
La 1^ère valeur définit la longueur du premier segment.
La 2^ème valeur définit la longueur du premier espace.
Et ainsi de suite. Lorsque la série de valeurs est explorée, on recommence au début.

Segments et espaces de 20 pixels
stroke-dasharray:20px;

Segments de 20 pixels et espaces de 5 pixels
stroke-dasharray:20px 5px;

Voir aussi les propriétés suivantes, concernant les pointillés :

stroke-dashoffset : Définit le point de départ des pointillés sur un contour SVG..
stroke-dash-corner : Définit comment gérer les pointillés dans les angles du contour (SVG)..
stroke-dash-justify : Définit l'ajustement des pointillés pour qu'un nombnre entier de segments soit compris dans le tracé (SVG)..

Valeurs pour `stroke-dasharray`.

stroke-dasharray: none;

La valeur none définit un tracé continu, sans pointillés.
stroke-dasharray: 10px 20px;

La propriété accepte une série de valeurs séparées par des espaces. Chacun des valeurs doit être suivie d'une des unités de dimension (l'abSense d'unité ne semble pas poser de problème, la valeur est alors considérée comme étant en pixels).
La première valeur est la longueur du premier tiret, la valeur suivante, la longueur du premier espacement, etc. Lorsque toutes ces valeurs ont été explorées, le cycle recommence à la première valeur.

Les pourcentages sont autorisés, et sont calculés par rapport à la moyenne de la longueur et de la hauteur du viewport SVG.
La valeur 0 est équivalente à none.

SVG

stroke-dasharray:10px
Une seule valeur spécifié : elle dimensionne aussi bien les tirets que les espacements entre les tirets

SVG

stroke-dasharray:30px 10px
Deux valeurs spécifiés : la première est la longueur des tirets, la deuxième la longueur des espaces

SVG

stroke-dasharray:10px 20px 50px
Lorsque le nombre de valeurs indiquées est impair, l'ensemble des valeurs est dupliqué ce qui donne forcément un nombre pair de valeurs, mais le résultat n'est pas forcément celui escompté : dans notre exemple, le pointillé parait un peu désordonné.

Ci-dessous, avec un nombre pair de valeurs, le résultat est un trait d'axe.

stroke-dasharray:10px 10px 50px 10px
stroke-dasharray: initial; (none) stroke-dasharray: inherit; stroke-dasharray: revert; stroke-dasharray: revertLayer; stroke-dasharray: unset;

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de `stroke-dasharray`.

L'animation des propriétés relatives aux pointillés peut donner des effets visuels intéressants. Voici un exemple avec la propriété stroke-dasharray

SVG

Exemple interactif avec la propriété `stroke-dasharray`.

stroke-dasharray :

none

SVG

Compatibilité des navigateurs avec `stroke-dasharray`.

Colonne 1

Support par les navigateurs de la propriété stroke-dasharray qui définit les distances des tirets et des espaces entre les tirets, pour un tracé en pointillé en SVG.

Propriété
stroke-dasharray

Estimation de la prise en charge globale.

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Edge

Opéra

Samsung Internet

Opéra Mobile

QQ Browser

Baidu Browser

Safari sur IOS

Safari

Firefox

Chrome

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `stroke-dasharray`.

SVG (Scalable Vector Graphics)

Introduction des propriétés dash-dasharray et stroke-dashoffset.

30 Octobre 2001
Document de travail.
30 Avril 2002
Candidat à la recommandation.
09 Juin 2011
Proposé à la recommandation.
16 Août 2011
Recommandation.
SVG (Scalable Vector Graphics)

Pas de changement concernant les propriétés stroke-dasharray et stroke-dashoffset.

28 Août 2012
Document de travail.
15 Septembre 2016
Candidat à la recommandation.
Module CSS - Traits et remplissages - Niveau 3

Pas de changement concernant les propriétés stroke-dasharray et stroke-dashoffset.
Introduction de deux nouvelles propriétés : stroke-dash-corner et stroke-dash-justify.

13 Avril 2017
Document de travail.

Voir aussi, concernant SVG.

Tout ce qui concerne les remplissages et contours en SVG est maintenant décrit dans le module de spécification CSS Fill and Stroke Module. Les propriétés stroke-dash... sont maintenant décrites dans ce module, avec les propriétés suivantes.