stroke-miterlimit
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
L'attribut stroke-miterlimit
définit la limite du rapport entre la longueur du coin et la valeur de stroke-width
utilisée pour dessiner la liaison entre deux segments de ligne. Quand la limite est dépassée, la liaison passe du type miter (pointu) au type bevel (biseauté).
Note : L'attribut stroke-miterlimit
étant un attribut de présentation, il peut être utilisé comme propriété CSS.
Cet attribut peut être appliqué à n'importe quel élément, en revanche il n'aura d'effet que sur les éléments suivants: <altGlyph>
, <path>
, <polygon>
, <polyline>
, <rect>
, <text>
, <textPath>
, <tref>
, and <tspan>
Exemple
<svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg">
<!-- Impact du miterlimit par défaut -->
<path
stroke="black"
fill="none"
stroke-linejoin="miter"
id="p1"
d="M1,9 l7 ,-3 l7 ,3
m2,0 l3.5 ,-3 l3.5 ,3
m2,0 l2 ,-3 l2 ,3
m2,0 l0.75,-3 l0.75,3
m2,0 l0.5 ,-3 l0.5 ,3" />
<!-- Impact du miterlimit le plus petit (1) -->
<path
stroke="black"
fill="none"
stroke-linejoin="miter"
stroke-miterlimit="1"
id="p2"
d="M1,19 l7 ,-3 l7 ,3
m2, 0 l3.5 ,-3 l3.5 ,3
m2, 0 l2 ,-3 l2 ,3
m2, 0 l0.75,-3 l0.75,3
m2, 0 l0.5 ,-3 l0.5 ,3" />
<!-- Impact d'un large miterlimit (8) -->
<path
stroke="black"
fill="none"
stroke-linejoin="miter"
stroke-miterlimit="8"
id="p3"
d="M1,29 l7 ,-3 l7 ,3
m2, 0 l3.5 ,-3 l3.5 ,3
m2, 0 l2 ,-3 l2 ,3
m2, 0 l0.75,-3 l0.75,3
m2, 0 l0.5 ,-3 l0.5 ,3" />
<!-- Les lignes roses suivantes indiquent la position du chemin pour chaque trait -->
<path
stroke="pink"
fill="none"
stroke-width="0.05"
d="M1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
</svg>
Quand deux segments de ligne se recontrent en angle aigu, et la liaison définit par stroke-linejoin
vaut miter
, il est possible que le coin s'étende bien au-delà de l'épaisseur de la ligne du contour. Le ratio stroke-miterlimit
est utilisé pour définir une limite à partir de laquelle la liaison est convertie de miter à bevel.
Le rapport entre la longueur du coin (distance entre le côté intérieur et le côté externe du coin) et stroke-width
est directement lié à l'angle (θ) entre les segments, tel que décrit par cette formule:
Par exemple, une limite de 1.414 convertit une liaison miter en bevel pour les angles de moins de 90 degrés, une limite de 4.0 pour les angles de moins de 29 degrés, et une limite de 10.0 pour les angles de moins de 11.5 degrés environ.
Contexte d'utilisation
Valeur | <number> |
---|---|
Valeur par défaut | 4 |
Animation | Oui |
La valeur de stroke-miterlimit
doit être supérieure ou égale à 1.
Spécifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # StrokeMiterlimitProperty |
Compatibilité des navigateurs
BCD tables only load in the browser