-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
134 lines (111 loc) · 4.26 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
---
title: stroke-miterlimit
slug: Web/SVG/Attribute/stroke-miterlimit
page-type: svg-attribute
browser-compat: svg.global_attributes.stroke-miterlimit
---
{{SVGRef}}
The **`stroke-miterlimit`** attribute is a presentation attribute defining a limit on the ratio of the miter length to the {{ SVGAttr("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:
- {{SVGElement('path')}}
- {{SVGElement('polygon')}}
- {{SVGElement('polyline')}}
- {{SVGElement('rect')}}
- {{SVGElement('text')}}
- {{SVGElement('textPath')}}
- {{SVGElement('tref')}}
- {{SVGElement('tspan')}}
## Example
```css hidden
html,
body,
svg {
height: 100%;
}
```
```html
<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>
```
{{EmbedLiveSample("Example", '100%', 400)}}
When two line segments meet at a sharp angle and `miter` joins have been specified for {{ SVGAttr("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 {{ SVGAttr("stroke-width") }} is directly related to the angle (theta) between the segments in user space by the formula:
<!-- prettier-ignore-start -->
<math display="block">
<semantics><mstyle displaystyle="true"><mi>stroke-miterlimit</mi><mo>=</mo><mfrac><mrow><mi>miterLength</mi></mrow><mrow><mi>stroke-width</mi></mrow></mfrac><mo>=</mo><mfrac><mrow><mn>1</mn></mrow><mrow><mrow><mi>sin</mi><mrow><mo>(</mo><mfrac><mrow><mo>θ</mo></mrow><mrow><mn>2</mn></mrow></mfrac><mo>)</mo></mrow></mrow></mrow></mfrac></mstyle><annotation encoding="TeX">\text{stroke-miterlimit} = \frac{\text{miterLength}}{\text{stroke-width}} = \frac{1}{\sin\left(\frac{\theta}{2}\right)}</annotation></semantics>
</math>
<!-- prettier-ignore-end -->
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
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td>
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>
</td>
</tr>
<tr>
<th scope="row">Default value</th>
<td>4</td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
The value of `stroke-miterlimit` must be greater than or equal to 1.
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}