`Stroke-dashoffset` - Propriété CSS

stroke-dashoffset

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

Description rapide

Définit le point de départ des pointillés sur un contour SVG.

Statut

Standard

S'applique à

Formes SVG.

Utilisable sur

SVG

Pourcentages

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

Valeur initiale

0

Héritée par défaut

Oui.

Type d'animation

Computed value : lors d'une animation, la propriété stroke-dashoffset 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)

Description de la 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.

SVG

Pointillé non décalé

SVG

Pointillé décalé de 10 pixels

Reportez-vous également aux propriétés suivantes, qui ont toutes un rapport avec les pointillés :

stroke-dasharray : Définit les caractéristiques d'un pointillé (en 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-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).

Si la valeur est exprimée en pourcentage, elle est calculée par rapport à la moyenne de la longueur et de la hauteur du vieuport.

Sur les exemples ci-dessous, le point rouge marque le début du tracé.
stroke-dashoffset: initial; (0) stroke-dashoffset: inherit; stroke-dashoffset: revert; stroke-dashoffset: revertLayer; stroke-dashoffset: unset;

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

Exemple d'animation de `stroke-dashoffset`.

L'animation des propriétés relatives aux pointillés peut donner des effets visuels intéressants. C'est le cas de stroke-dashoffset qui s'anime en passant progressivement d'une valeur à l'autre.

SVG

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

Vous pouvez ajuster la valeur de stroke-dashoffset mais vous constatez qu'il n'est pas forcément possible de trouver une valeur qui satisfasse à tous les angles.

stroke-dashoffset :

SVG

Compatibilité des navigateurs avec `stroke-dashoffset`.

Colonne 1

Support par les navigateurs de la possibilité de décaler les pointillés le long du tracé, la propriété stroke-dashoffset.

Propriété
stroke-dashoffset

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

Safari

Safari sur IOS

Opéra Mobile

QQ Browser

Baidu Browser

Chrome

Edge

Firefox

Opéra

Chrome pour Androïd

Samsung Internet

Androïd Brower

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-dashoffset`.

Module CSS - Traits et remplissages - Niveau 3

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.