Contour en pointillés - Propriétés CSS

Schémas syntaxiques.

Description des propriétés relatives aux contours en pointillés.

Les propriétés stroke-dash-corner et stroke-dash-justify seront prochainement décrites plus en détail. Pour le moment aucun navigateur ne les reconnaît (2024).

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.

Pour plus de détails sur la propriété stroke-dasharray, voyez la page stroke-dasharray.

Propriété stroke-dashoffset.

Cette propriété définit le décalage des pointillés par rapport au point de départ du tracé. Cette possibilité est intéressante dans de nombreux cas de figure, en particulier pour rendre les pointillés plus esthétiques dans les angles du contour.

Sur les exemple ci-dessous, le point de départ du tracé est matérialisé par un point rouge. Les pointillés sont une alternance d'espaces et de segments, chacun d'eux ayant une longueur de 20 pixels. Sans décalage, les pointillés ne sont pas symétriques par rapport aux angles du contour. Avec un décalage de 10 pixels on retrouve une symétrie bien plus esthétique.

Reportez vous à la page stroke-dashoffset pour plus d'informations sur cette propriété.

Propriété stroke-dash-corner.

Il n'est pas toujours possible d'obtenir des pointillés symétriques à tous les angles d'un contours simplement en ajustant l'offset, en particulier lorsque la figure est composée de segments de longueurs inégales. La propriété stroke-dash-corner, encore peu reconnue, doit résoudre ce problème : elle définit la longueur d'un segment plein (sans pointillé) qui sera dessiné à chacun des angles de la forme.

L'exemple ci-dessous est une simulation car la propriété stroke-dash-corner n'est pas encore traitée par les navigateurs.

Voyez la page stroke-dash-corner pour davantage d'explications.

Propriété stroke-dash-justify.

La propriété stroke-dash-justify définit comment doivent être ajustées les longueurs des pointillés pour qu'un nombre entier de pointillés puissent entrer dans la longueur du contour.

L'exemple ci-dessous est une simulation car la propriété stroke-dash-justify n'est pas encore traitée par les navigateurs.
La longueur du contour est d'environ 251 pixels, et celle des pointillés de 23 + 23 pixels, soit 46 pixels.
251 / 46 = 5,4, ce qui n'est pas un nombre entier. On constate (à gauche) que l'un des segments parait plus long, car le segment de départ et celui de fin se sont rejoints.

Reportez-vous à la page stroke-dash-justify pour plus d'explications sur la propriété stroke-dash-justify.

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, mais leur calcul ne semble pas clairement défini.
  La valeur 0 est équivalente à none.

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

  stroke-dasharray:30px 10px
  Deux valeurs spécifiés : la première est la longueur des tirets, la deuxième la longueur des espaces
  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

Valeurs pour stroke-dashoffset.

• stroke-dashoffset: 5px;

  La valeur est positive ou négative, suivie d'une des unités de dimension. Les pointillés seront décalés de cette valeur. Le sens du décalage n'est pas intuitif (voir les exemples).

  Sur les exemples ci-dessous, le point rouge marque le début du tracé.

Valeurs pour stroke-dash-corner.

• stroke-dash-corner: 5px;

  La valeur est positive, et suivie d'une des unités de dimension.

Valeurs pour stroke-dash-justify.

• stroke-dash-justify: none;

• stroke-dash-justify: stretch;

• stroke-dash-justify: compress;

• stroke-dash-justify: dashes;

• stroke-dash-justify: gaps;

• stroke-dasharray: initial; (none) stroke-dasharray: inherit; stroke-dasharray: revert; stroke-dasharray: revertLayer; stroke-dasharray: unset;

  stroke-dashoffset: initial; (0) stroke-dashoffset: inherit; stroke-dashoffset: revert; stroke-dashoffset: revertLayer; stroke-dashoffset: unset;

  stroke-dash-corner: initial; (none) stroke-dash-corner: inherit; stroke-dash-corner: revert; stroke-dash-corner: revertLayer; stroke-dash-corner: unset;

  stroke-dash-justify: initial; (none) stroke-dash-justify: inherit; stroke-dash-justify: revert; stroke-dash-justify: revertLayer; stroke-dash-justify: unset;

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

Animation.

L'animation des propriétés relatives aux pointillés peut donner des effets visuels intéressants.

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

Compatibilité des navigateurs avec stroke-dasharray.

1

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.

Propriétés :