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:

${\displaystyle \mathrm{<code>stroke-miterlimit</code>}=\frac{\mathrm{miterLength}}{\mathrm{<code>stroke-width</code>}}=\frac{1}{\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.

Usage context

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

Browser compatibility

BCD tables only load in the browser

Specifications