L'attribut stroke-linecap
définit la forme de la fin des lignes SVG.
Note: stroke-linecap
Ă©tant un attribut de prĂ©sentation, il peut ĂȘtre utilisĂ© comme propriĂ©tĂ© CSS.
Cet attribut peut ĂȘtre appliquĂ© Ă tous les Ă©lĂ©ments, en revanche il n'aura d'effet que sur les Ă©lĂ©ments suivants: <altGlyph>
, <path>
, <polyline>
, <text>
, <textPath>
, <tref>
, et <tspan>
html,body,svg { height:100% }
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
<!-- Effet de la valeur "butt" (valeur par défaut) -->
<line x1="1" y1="1" x2="5" y2="1" stroke="black"
stroke-linecap="butt" />
<!-- Effet de la valeur "round" -->
<line x1="1" y1="3" x2="5" y2="3" stroke="black"
stroke-linecap="round" />
<!-- Effet de la valeur "square" -->
<line x1="1" y1="5" x2="5" y2="5" stroke="black"
stroke-linecap="square" />
<!--
Les lignes roses indiquent la position
du chemin pour chaque trait
-->
<path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" />
</svg>
Notes d'usage
Valeur | butt | round | square |
---|---|
Valeur par défaut | butt |
Animation | Oui |
butt
La valeur butt
indique que le trait de chaque chemin ne s'étend pas au-delà de ses extremités. Un chemin de longueur zéro ne s'affichera pas du tout.
Exemple
html,body,svg { height:100% }
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
<!-- Effet de la valeur "butt" -->
<path d="M1,1 h4" stroke="black"
stroke-linecap="butt" />
<!-- Effet de la valeur "butt" sur un chemin de longueur zéro -->
<path d="M3,3 h0" stroke="black"
stroke-linecap="butt" />
<!--
Lignes roses pour indiquer la position
du chemin pour chaque trait
-->
<path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
<circle cx="1" cy="1" r="0.05" fill="pink" />
<circle cx="5" cy="1" r="0.05" fill="pink" />
<circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
round
La valeur round
indique que la fin de chaque trait sera prolongé d'un demi-cerlce de diamÚtre égal à la la largeur du trait. Pour un chemin de longueur zéro, un cercle complet est affiché.
Exemple
html,body,svg { height:100% }
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
<!-- Effet de la valeur "round" -->
<path d="M1,1 h4" stroke="black"
stroke-linecap="round" />
<!-- Effet de la valeur "round" sur un chemin de longueur zéro -->
<path d="M3,3 h0" stroke="black"
stroke-linecap="round" />
<!--
Lignes roses pour indiquer la position
du chemin pour chaque trait
-->
<path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
<circle cx="1" cy="1" r="0.05" fill="pink" />
<circle cx="5" cy="1" r="0.05" fill="pink" />
<circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
square
La valeur square
indique que la fin de chaque trait sera prolongé par un rectangle d'une taille égale à la moitié de l'épaisseur du contour. Pour un chemin de longueur zéro, seul un rectangle est affiché, de la longueur de l'épaisseur du contour, et centré autour de la position du chemin.
Exemple
html,body,svg { height:100% }
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
<!-- Effet de la valeur "square" -->
<path d="M1,1 h4" stroke="black"
stroke-linecap="square" />
<!-- Effet de la valeur "square" sur un chemin de longueur zéro -->
<path d="M3,3 h0" stroke="black"
stroke-linecap="square" />
<!--
Les lignes roses indiquent la position
du chemin pour chaque trait
-->
<path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
<circle cx="1" cy="1" r="0.05" fill="pink" />
<circle cx="5" cy="1" r="0.05" fill="pink" />
<circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
Compatibilité des navigateurs
BCD tables only load in the browser
Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
Spécification
Spécification | Statut | Commentaire |
---|---|---|
Scalable Vector Graphics (SVG) 2 La définition de 'stroke-linecap' 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-linecap' dans cette spécification. |
Recommendation | Définition initiale pour les formes et le texte |