« SVG Attribute reference home
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
imposes a limit on the ratio of the miter length to the stroke-width
. When the limit is exceeded, 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:
miterLength / stroke-width = 1 / sin ( theta / 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
Categories | Presentation attribute |
---|---|
Value | <miterlimit> | inherit |
Initial value | 4 |
Animatable | Yes |
Normative document | SVG 1.1 (2nd Edition) |
- <miterlimit>
- The limit on the ratio of the miter length to the
stroke-width
. The value of <miterlimit> must be a <number> greater than or equal to 1.
Example
<?xml version="1.0"?> <svg width="120" height="500" viewBox="0 0 120 500" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polyline stroke-linejoin="miter" stroke-miterlimit="6" points="-20,500 60,60 140,500" stroke="black" stroke-width="15" fill="none" /> <polyline stroke-linejoin="miter" stroke-miterlimit="5" points="-20,700 60,260 140,700" stroke="black" stroke-width="15" fill="none" /> <path d="M-20,500 L60,60 L140,500 M-20,700 L60,260 L140,700" stroke="white" fill="none" /> </svg>
Live sample
Elements
The following elements can use the stroke-miterlimit
attribute