stroke-miterlimit

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-miterlimit définit une limite sur le rapport entre la longueur de l'onglet et la largeur du contour (stroke-width) lorsque la forme utilisée aux coins du tracé d'un élément SVG est une jonction en onglet. Si la limite définie par cette propriété est dépassée, la jonction est convertie de miter à bevel, ce qui donne à l'angle un aspect tronqué.

Cette propriété s'applique à toute forme SVG générant des coins ou à tout élément de contenu textuel (voir stroke-miterlimit 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. Si elle est présente, elle remplace l'attribut stroke-miterlimit de l'élément.

Description

Lorsque deux segments de ligne se rejoignent à un angle aigu et que des jonctions miter ont été définies pour stroke-linejoin, ou si elles prennent cette valeur par défaut, il est possible que l'onglet dépasse largement l'épaisseur de la ligne du tracé. Le rapport stroke-miterlimit sert à définir une limite, au-delà de laquelle la jonction est convertie d'un onglet à un biseau.

Le rapport entre la longueur de l'onglet (la distance entre la pointe extérieure et le coin intérieur de l'onglet) et la stroke-width est directement lié à l'angle (thêta) entre les segments dans l'espace utilisateur par la formule :

\text{stroke-miterlimit} = \frac{\text{miterLength}}{\text{stroke-width}} = \frac{1}{\sin\left(\frac{\theta}{2}\right)}

Par exemple, une limite d'onglet de 1.414 convertit les onglets en biseaux pour une valeur de thêta inférieure à 90 degrés, une limite de 4.0 les convertit pour une thêta inférieure à environ 29 degrés, et une limite de 10.0 les convertit pour une thêta inférieure à environ 11,5 degrés.

Syntaxe

css

/* Valeurs numériques */
stroke-miterlimit: 1;
stroke-miterlimit: 3.1416;

/* Valeurs globales */
stroke-miterlimit: inherit;
stroke-miterlimit: initial;
stroke-miterlimit: revert;
stroke-miterlimit: revert-layer;
stroke-miterlimit: unset;

Valeurs

<number>: Tout nombre réel positif égal ou supérieur à 1 ; les valeurs inférieures à 1 sont invalides. La valeur initiale est 4.

Définition formelle

Valeur initiale	`4`
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	par type de valeur calculée

Syntaxe formelle

stroke-miterlimit = 
  <number>

Exemples

Différentes limites d'onglet

Cet exemple montre l'effet de différentes valeurs pour la propriété stroke-miterlimit.

HTML

Nous créons cinq chemins à segments multiples, qui utilisent tous un contour noir d'une largeur de un, sans remplissage. Chaque chemin crée une série de symboles de montagne, allant de la gauche (un angle de coin peu prononcé) à la droite (un angle de coin très prononcé).

html

<svg viewBox="0 0 39 36" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="none">
    <path
      d="M1,5 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" />
    <path
      d="M1,12 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" />
    <path
      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" />
    <path
      d="M1,26 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" />
    <path
      d="M1,33 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" />
  </g>
</svg>

CSS

Nous appliquons des valeurs de plus en plus grandes de stroke-miterlimit aux chemins, de sorte que pour le premier chemin, seul le premier sous-chemin (le plus à gauche) est en onglet ; pour le deuxième chemin, les deux premiers sous-chemins sont en onglet ; et ainsi de suite jusqu'à ce que, pour le cinquième chemin, les cinq sous-chemins soient en onglet.

css

path:nth-child(1) {
  stroke-miterlimit: 1.1;
}
path:nth-child(2) {
  stroke-miterlimit: 1.4;
}
path:nth-child(3) {
  stroke-miterlimit: 1.9;
}
path:nth-child(4) {
  stroke-miterlimit: 4.2;
}
path:nth-child(5) {
  stroke-miterlimit: 6.1;
}

Spécifications

Spécification
CSS Fill and Stroke Module Level 3 # stroke-miterlimit

Compatibilité des navigateurs

Voir aussi

La propriété stroke-dasharray
La propriété stroke-dashoffset
La propriété stroke-linecap
La propriété stroke-linejoin
La propriété stroke-opacity
La propriété stroke-width
La propriété stroke
L'attribut SVG stroke-miterlimit

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 1 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu