stroke-miterlimit
**stroke-miterlimit
** 属性是一个表示属性,用于定义斜接长度与用于绘制斜接连接的 stroke-width
之间比率的限制。当超过限制时,连接将从斜接转换为斜角。
注意:作为表示属性,stroke-miterlimit
可以用作 CSS 属性。有关更多信息,请参阅 stroke-miterlimit
。
您可以将此属性与以下 SVG 元素一起使用
示例
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>
当两条线段以锐角相交且已为 stroke-linejoin
指定了 miter
连接时,斜接可能延伸到描边路径线宽之外。stroke-miterlimit
比率用于定义何时超过限制,如果超过限制,则连接将从斜接转换为斜角。
斜接长度(斜接外端与内角之间的距离)与 stroke-width
的比率与用户空间中线段之间的角度 (theta) 直接相关,公式如下:
例如,斜接限制为 1.414 会将 theta 小于 90 度的斜接转换为斜角,限制为 4.0 会将 theta 小于大约 29 度的斜接转换为斜角,限制为 10.0 会将 theta 小于大约 11.5 度的斜接转换为斜角。
使用上下文
值 | <number> |
---|---|
默认值 | 4 |
可动画 | 是 |
stroke-miterlimit
的值必须大于或等于 1。
规范
规范 |
---|
可缩放矢量图形 (SVG) 2 # StrokeMiterlimitProperty |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。