Propriété CSS stroke-dashoffset

❮ Précédent Suivant ❯

La propriété stroke-dashoffset est un attribut de présentation, qui définit la position de départ des pointillés sur les lignes SVG.

Les unités "px" ou "em" ne sont pas demandées.

Valeur initiale	0
Appliquée à	Formes et éléments de contenu de texte.
Héritée	Oui.
Animable	Non.
Version	SVG 1.1 Specification
Syntaxe DOM	Object.strokeDashoffset = "5";

Syntaxe

stroke-dashoffset: length | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h2>Exemple de la propriété stroke-dashoffset</h2>
    <svg viewBox="-3 0 33 10" >
      <line x1="0" y1="1" x2="30" y2="1" stroke="#1c87c9" />
      <line x1="0" y1="3" x2="30" y2="3" stroke="#ccc"
        stroke-dasharray="4 1" />
      <line x1="0" y1="5" x2="30" y2="5" stroke="#8ebf42"
        stroke-dasharray="3 1"
        stroke-dashoffset="3" />
      <line x1="0" y1="7" x2="30" y2="7" stroke="#FF0000"
        stroke-dasharray="3 1"
        stroke-dashoffset="-3" />
      <line x1="0" y1="9" x2="30" y2="9" stroke="#666"
        stroke-dasharray="3 1"
        stroke-dashoffset="1" />
      <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="#000"/>
    </svg>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
length	Définit la longueur de la propriété. Les unités "px" ou "em" ne sont pas demandées.
percentage	La propriété est spécifiée en pourcentage.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.