Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
stroke-dashoffset
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2020.
L'attributstroke-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>
Exemple
html,body,svg { height: 100%;}<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'usage
| Valeur | <percentage> |<length> |
|---|---|
| Valeur par défaut | 0 |
| Animation | Oui |
Le décalage est généralement exprimé en unités résolues parpathLength mais si un<percentage> est utilisé, alors la valeur est résolue en pourcentage du viewport.
Spécifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # StrokeDashoffsetProperty |