stroke-dashoffset

Aller à :
  1. Notes d'ussage
  2. Compatibilité des navigateurs
  3. Spécification

L'attribut stroke-dashoffset décale la position de départ des pointillés sur les lignes SVG.

Note: stroke-dashoffset étant un attribut de présentation, il peut être utilisé comme propriété CSS.

Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: <altGlyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, and <tspan>

<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Pas de tiret -->
  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
 
  <!-- Pas de décalage -->
  <line x1="0" y1="3" x2="30" y2="3" stroke="black"
        stroke-dasharray="3 1" />
 
  <!--
  Le début des tirets est décalé
  de 3 unités vers la gauche
  -->
  <line x1="0" y1="5" x2="30" y2="5" stroke="black"
        stroke-dasharray="3 1"
        stroke-dashoffset="3" />
 
  <!--
  Le début des tirets est décalé
  de 3 unités vers la droite (-3)
  -->
  <line x1="0" y1="7" x2="30" y2="7" stroke="black"
        stroke-dasharray="3 1"
        stroke-dashoffset="-3" />
 
  <!--
  Le début des tirets est décalé
  de 1 unité vers la gauche
  ce qui affiche la même chose que l'exemple précédent
  -->
  <line x1="0" y1="9" x2="30" y2="9" stroke="black"
        stroke-dasharray="3 1"
        stroke-dashoffset="1" />
 
  <!--
  Lignes rouges pour indiquer la position
  de départ des tirets
  -->
  <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" />
</svg>

Notes d'ussage

Valeur <percentage> | <length>
Valeur par défaut 0
Animation Oui

Le décalage est généralement exprimé en unités résolues par pathLength mais si un <percentage> est utilisé, alors la valeur est résolue en pourcentage du viewport.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Compatibilité inconnue  
Compatibilité inconnue

Spécification

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de 'stroke-dashoffset' dans cette spécification.		 Candidat au statut de recommandation Définition pour les formes et le texte
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'stroke-dashoffset' dans cette spécification.		 Recommendation Définition initiale pour les formes et le texte

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt
Dernière mise à jour par : a-mt,