The `stroke-miterlimit`

attribute is a presentation attribute defining a limit on the ratio of the miter length to the `stroke-width`

used to draw a miter join. When the limit is exceeded, the join is converted from a miter to a bevel.

**Note:** As a presentation attribute `stroke-miterlimit`

can be used as a CSS property.

As a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: `<altGlyph>`

, `<path>`

, `<polygon>`

, `<polyline>`

, `<rect>`

, `<text>`

, `<textPath>`

, `<tref>`

, and `<tspan>`

<svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg"> <!-- Impact of the default miter limit --> <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 of the smallest miter limit (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 of a large miter limit (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" /> <!-- the following pink lines highlight the position of the path for each stroke --> <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>

When two line segments meet at a sharp angle and `miter`

joins have been specified for `stroke-linejoin`

, it is possible for the miter to extend far beyond the thickness of the line stroking the path. The `stroke-miterlimit`

ratio is used to define when the limit is exceeded, if so the join is converted from a miter to a bevel.

The ratio of miter length (distance between the outer tip and the inner corner of the miter) to `stroke-width`

is directly related to the angle (theta) between the segments in user space by the formula:

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

For example, a miter limit of 1.414 converts miters to bevels for theta less than 90 degrees, a limit of 4.0 converts them for theta less than approximately 29 degrees, and a limit of 10.0 converts them for theta less than approximately 11.5 degrees.

Value | <number> |
---|---|

Default value | 4 |

Animatable | Yes |

The value of `stroke-miterlimit`

must be greater than or equal to 1.

Desktop | ||||||
---|---|---|---|---|---|---|

`stroke-miterlimit` |
? | ? | ? | ? | ? | ? |

Mobile | ||||||
---|---|---|---|---|---|---|

`stroke-miterlimit` |
? | ? | ? | ? | ? | ? |

Specification | Status | Comment |
---|---|---|

Scalable Vector Graphics (SVG) 2 The definition of 'stroke-miterlimit' in that specification. | Candidate Recommendation | Definition for shapes and texts |

Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'stroke-miterlimit' in that specification. | Recommendation | Initial definition for shapes and texts |

© 2005–2020 Mozilla and individual contributors.

Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit