stroke-miterlimit
SVG Elements
- A
- B-C
- D
- E
- F
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<font>
<font-face>
<font-face-format>
<font-face-name>
<font-face-src>
<font-face-uri>
<foreignObject>
- G
- H
- I
- J-L
- M
- N-P
- Q-R
- S
- T
- U
- V-Z
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.
You can use this attribute with the following SVG elements:
Example
<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:
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.
Specifications
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 |
Browser compatibility
BCD tables only load in the browser