`Stroke-miterlimit` - Propriété CSS

stroke-miterlimit

Résumé des caractéristiques de la propriété `stroke-miterlimit`

Description rapide

Limite le dépassement des raccordements de segments avec un angle aigu.

Statut

Standard

S'applique à

Formes SVG.

Utilisable sur

SVG

Pourcentages

Ne s'appliquent pas.

Valeur initiale

4

Héritée par défaut

Oui.

Type d'animation

Computed value : lors d'une animation, la propriété stroke-miterlimit passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Traits et remplissages

Références (W3C)

🡇

🡅

CSS Fill and Stroke Module Level 3

Statut du document: WD (document de travail)

Scalable Vector Graphics (SVG)

Statut du document: CR (document candidat à la recommandation)

Description de la propriété `stroke-miterlimit`.

Lorsque des segments se rejoignent avec un angle aigu, il peut se produire une pointe qui dépasse largement l'épaisseur du tracé, particulièrement si la propriété stroke-linejoin a une des valeurs miter, miter-clip ou arcs.
La propriété stroke-miterlimit permet alors de limiter la longueur de cette pointe.

Exemple d'un raccordement formant une pointe
stroke-linejoin:miter

Limitation de la longueur de la pointe avec
stroke-miterlimit:2
stroke-linejoin:miter

Voyez aussi la propriété stroke-linejoin qui définit comment se raccorde les segments. Certaines valeurs de cette propriété rendent inutile stroke-miterlimit

Valeurs pour `stroke-miterlimit`.

stroke-miterlimit: 2;

La taille de la pointe du raccordement sera tronquée à un valeur multiple de l'épaisseur du trait (stroke-width). Les valeurs négatives ou inférieures à 1 sont interdites et rendent la règle invalide.

SVG

stroke-linejoin:miter bevel; stroke-miterlimit:4;

Pas de limitation de la taille de la pointe

SVG

stroke-linejoin:miter bevel; stroke-miterlimit:2;

Limitation de la pointe, cassure bevel

SVG

stroke-linejoin:miter round; stroke-miterlimit:2;

stroke-miterlimit est sans effet
stroke-miterlimit: initial; (4) stroke-miterlimit: inherit; stroke-miterlimit: revert; stroke-miterlimit: revertLayer; stroke-miterlimit: unset;

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de `stroke-miterlimit`.

La spécification du W3C précise que stroke-miterlimit ne peut pas être animée, c'est cependant possible dans le mode discrete : passage brutal d'une valeur à l'autre.

SVG

Exemple interactif avec la propriété `stroke-miterlimit`.

Sur l'échantillon ci-dessous, le tracé bleu épais est celui sur lequel on change la valeur de stroke-miterlimit. Le tracé blanc et fin sert de comparaison. Il fait apparaître en particulier les changements de dimensions provoqués par les différents modes de jointures des segments.

stroke-miterlimit :

SVG

Compatibilité des navigateurs avec `stroke-miterlimit`.

Colonne 1

Support par les navigateurs de la propriété stroke-miterlimit qui limite les extensions des lignes lorsque deux segments se croisent à angle aigu.

Propriété
stroke-miterlimit

Estimation de la prise en charge globale.

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Safari

Safari sur IOS

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `stroke-miterlimit`.

SVG (Scalable Vector Graphics)

Introduction de la propriété stroke-miterlimit.

28 Août 2012
Document de travail.
15 Septembre 2016
Candidat à la recommandation.
Module CSS - Traits et remplissages - Niveau 3

Transfert de la description de cette propriété dans ce module de spécification. Les valeurs entre 0 et 1 sont maintenant déclarées comme interdites et invalident l'expression.

13 Avril 2017
Document de travail.

Voir aussi - Les tracés en SVG

L'ajustement précis des tracés en SVG se fait par le biais de nombreuses propriétés : type de raccordement, épaisseur, extrémités, pointillés, etc. Ces propriétés sont décrites dans la spécification CSS Fill and Stroke Module.