Propriété CSS stroke-dashoffset

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>

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.

Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées