stroke-miterlimit - SVG: Scalable Vector Graphics

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>

html,body,svg { height:100% }

<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:

$stroke-miterlimit = \frac{miterLength}{stroke-width} = \frac{1}{\sin (\frac{θ}{2})}$

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.

Usage context

Value	<number>
Default value	4
Animatable	Yes

The value of stroke-miterlimit must be greater than or equal to 1.

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`stroke-miterlimit`	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?

Legend

Compatibility unknown: Compatibility unknown

Specification

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