stroke-miterlimit

Baseline 已广泛支持

此功能已经成熟，并可在许多设备和浏览器版本上使用。自 ⁨2020 年 3 月⁩起，它已在各浏览器中推出。

stroke-miterlimit 属性是一个表示属性，它定义了用于绘制斜接连接的斜接长度与stroke-width 之间的比率限制。当超过此限制时，连接将从斜接转换为斜角。

注意： 作为一个表示属性，stroke-miterlimit 也有一个对应的 CSS 属性：stroke-miterlimit。当两者都被指定时，CSS 属性具有更高的优先级。

你可以将此属性与以下 SVG 元素一起使用

示例

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>

当两条线段以锐角相交，并且为 stroke-linejoin 指定了 miter 连接时，斜接可能会远超绘制路径的描边宽度。stroke-miterlimit 比率用于定义何时超过限制，如果超过，则连接将从斜接转换为斜角。

斜接长度（斜接外尖端与内角之间的距离）与stroke-width 的比率与用户空间中线段之间的角度（theta）通过以下公式直接相关：

\text{stroke-miterlimit} = \frac{\text{miterLength}}{\text{stroke-width}} = \frac{1}{\sin\left(\frac{\theta}{2}\right)}

例如，miter 限制为 1.414 时，theta 小于 90 度时斜接将转换为斜角；限制为 4.0 时，theta 小于约 29 度时转换为斜角；限制为 10.0 时，theta 小于约 11.5 度时转换为斜角。

使用语境

值	<number>
默认值	4
可动画的	是

stroke-miterlimit 的值必须大于或等于 1。

规范

规范
Scalable Vector Graphics (SVG) 2 # StrokeMiterlimitProperty

浏览器兼容性

另见

CSS stroke-miterlimit 属性

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年4月16日⁩，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题