stroke-linecap
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2017.
La propriété CSS stroke-linecap définit la forme à utiliser à la fin des sous-tracés ouverts des contours non fermés des éléments SVG. Si elle est présente, elle remplace l'attribut SVG stroke-linecap de l'élément.
Cette propriété s'applique à tout élément de forme SVG pouvant avoir des contours non fermés et aux éléments de contenu textuel (voir stroke-linecap pour une liste complète), mais en tant que propriété héritée, elle peut être appliquée à des éléments tels que <g> et avoir toujours l'effet souhaité sur les contours des éléments descendants.
Syntaxe
/* Valeurs avec un mot-clé */
stroke-linecap: butt;
stroke-linecap: round;
stroke-linecap: square;
/* Valeurs globales */
stroke-linecap: inherit;
stroke-linecap: initial;
stroke-linecap: revert;
stroke-linecap: revert-layer;
stroke-linecap: unset;
Valeurs
butt-
Indique que le contour de chaque sous-tracé ne s'étend pas au-delà de ses deux points d'extrémité. Sur un sous-tracé de longueur nulle, le chemin ne sera pas rendu du tout. C'est la valeur par défaut.
round-
Indique qu'à la fin de chaque sous-tracé, le contour sera étendu par un demi-cercle dont le diamètre est égal à la largeur du contour. Sur un sous-tracé de longueur nulle, le contour consiste en un cercle complet centré sur le point du sous-tracé.
square-
Indique qu'à la fin de chaque sous-tracé, le contour sera étendu par un rectangle dont la largeur est égale à la moitié de la largeur du contour et la hauteur est égale à la largeur du contour. Sur un sous-tracé de longueur nulle, le contour consiste en un carré dont la largeur est égale à la largeur du contour, centré sur le point du sous-tracé.
Définition formelle
| Valeur initiale | butt |
|---|---|
| Applicabilité | éléments <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline> et <rect> dans un svg |
| Héritée | oui |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
stroke-linecap =
butt |
round |
square
Exemples
Extrémités de ligne
Cet exemple montre les trois valeurs de mot-clé de la propriété.
HTML
Nous commençons par placer un rectangle gris clair. Ensuite, dans un groupe, trois chemins sont définis dont la longueur est exactement la même que la largeur du rectangle, et qui commencent tous au bord gauche du rectangle. Ils ont tous un contour dodgerblue d'une largeur de sept.
<svg viewBox="0 0 100 50" width="500" height="250">
<rect x="10" y="5" width="80" height="30" fill="#dddddd" />
<g stroke="dodgerblue" stroke-width="7">
<path d="M 10,10 h 80" />
<path d="M 10,20 h 80" />
<path d="M 10,30 h 80" />
</g>
</svg>
CSS
Nous appliquons ensuite un style d'extrémité de ligne différent à chaque chemin avec CSS.
path:nth-of-type(1) {
stroke-linecap: butt;
}
path:nth-of-type(2) {
stroke-linecap: square;
}
path:nth-of-type(3) {
stroke-linecap: round;
}
Résultats
Le premier chemin a des extrémités de type butt, ce qui signifie que le contour s'arrête exactement aux points de début et de fin du chemin, et pas plus loin. Le deuxième chemin a des extrémités de type square, donc le chemin visible s'étend au-delà des points d'extrémité, ce qui fait que la longueur totale du chemin semble être de 87, puisque la longueur du chemin est de 80 et que chacune des deux extrémités carrées mesure 3,5 de large. Le troisième chemin a des extrémités de type round, donc bien qu'il semble aussi mesurer 87 unités de long, les deux extrémités sont semi-circulaires au lieu d'être carrées.
Spécifications
| Spécification |
|---|
| CSS Fill and Stroke Module Level 3 # stroke-linecap |
Compatibilité des navigateurs
Voir aussi
- La propriété
stroke-dasharray - La propriété
stroke-dashoffset - La propriété
stroke-linejoin - La propriété
stroke-miterlimit - La propriété
stroke-opacity - La propriété
stroke-width - La propriété raccourcie
stroke - L'attribut SVG
stroke-linecap