Propriété CSS stroke-dashoffset

La propriété stroke-dashoffset est un attribut de présentation qui définit l’emplacement le long d’un chemin SVG où commencera le tiret d’un trait.

Les règles CSS remplacent les attributs de présentation. Les styles en ligne ont priorité sur les deux.

INFO

La propriété stroke-dashoffset peut être utilisée à la fois comme propriété CSS et comme attribut de présentation. Elle peut être appliquée à n’importe quel élément, mais n’a d’effet que sur les éléments suivants : <altGlyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> et <tspan>.

INFO

Les unités "Px" ou "em" ne sont pas requises.

Valeur initiale	0
S’applique à	Formes et éléments de contenu textuel.
Hérité	Oui.
Animable	Oui.
Version	Spécification SVG 1.1
Syntaxe DOM	Object.strokeDashoffset = 5;

Syntaxe

Syntaxe CSS de stroke-dashoffset

css

stroke-dashoffset: length | percentage | initial | inherit;

Exemple de la propriété stroke-dashoffset :

La valeur stroke-dashoffset décale le point de départ du motif en tirets le long du chemin.

Exemple de code CSS stroke-dashoffset

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-dashoffset property example</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>

Try it Yourself »

Résultat

Liste des valeurs de CSS stroke-dashoffset

Valeurs

Valeur	Description
length	Définit la longueur de la propriété. Les unités "Px" ou "em" ne sont pas requises.
percentage	La propriété est spécifiée en pourcentage.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de l’élément parent.

Practice

What is the purpose of the stroke-dashoffset CSS property and how is it used?

It is used to change the location of the dashes in a dashed line.It specifies the dimensions of the border image.It changes the outline style of an element.It uses <length> values to define the offset of the stroke dash.It accepts only percentage values to define the offset of the stroke dash.

Propriété CSS stroke-dashoffset ​

Syntaxe ​

Exemple de la propriété stroke-dashoffset : ​

Résultat ​