stroke-miterlimit

**stroke-miterlimit** CSS 属性定义了当用于 SVG 元素描边路径角处的形状为斜接连接时，斜接长度与 stroke-width 之比的限制。如果超过此属性定义的限制，则连接将从 miter 转换为 bevel，从而使角看起来被截断。

此属性适用于任何生成 SVG 角的形状或文本内容元素（有关完整列表，请参阅 stroke-miterlimit），但作为继承属性，它可以应用于诸如 <g> 之类的元素，并仍然对后代元素的描边产生预期效果。如果存在，它将覆盖元素的 stroke-miterjoin 属性。

描述

当两条线段以锐角相交且已为 stroke-linejoin 指定了斜接连接，或者如果它们默认为该值时，斜接可能会扩展到远远超出描边路径的线宽之外。stroke-miterlimit 比例用于定义一个限制，超过该限制，连接将从斜接转换为斜角。

斜接长度（斜接外端点与内角之间的距离）与 stroke-width 的比率与用户空间中线段之间的角度 (theta) 直接相关，公式如下

stroke-miterlimit = 斜接长度 stroke-width = 1 正弦 ( θ 2 ) \text{stroke-miterlimit} = \frac{\text{斜接长度}}{\text{stroke-width}} = \frac{1}{\sin\left(\frac{\theta}{2}\right)}

例如，1.414 的斜接限制会将斜接转换为 theta 值小于 90 度的斜角，4.0 的限制会将它们转换为大约 29 度以下的 theta，而 10.0 的限制会将它们转换为大约 11.5 度以下的 theta。

语法

css
/* number values */
stroke-miterlimit: 1;
stroke-miterlimit: 3.1416;

/* Global values */
stroke-miterlimit: inherit;
stroke-miterlimit: initial;
stroke-miterlimit: revert;
stroke-miterlimit: revert-layer;
stroke-miterlimit: unset;

Values

<number>

任何等于或大于 1 的正实数；低于该值的值无效。初始值为 4。

正式定义

数据库中未找到值！

正式语法

stroke-miterlimit = 
  <number>

示例

各种斜接限制

此示例演示了 stroke-miterlimit 属性的不同值的效用。

HTML

我们设置了五个多段路径，所有路径都使用黑色描边，宽度为 1，并且没有填充。每个路径都创建一系列山脉符号，从左（浅角）到右（极端角）。

html
<svg viewBox="0 0 39 36" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="none">
    <path
      d="M1,5 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" />
    <path
      d="M1,12 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" />
    <path
      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" />
    <path
      d="M1,26 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" />
    <path
      d="M1,33 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" />
  </g>
</svg>

CSS

我们对路径应用越来越大的stroke-miterlimit值，使得对于第一个路径，只有第一个（最左侧）子路径是斜接的；对于第二个路径，前两个子路径是斜接的；以此类推，直到第五个路径，所有五个子路径都是斜接的。

css
path:nth-child(1) {
  stroke-miterlimit: 1.1;
}
path:nth-child(2) {
  stroke-miterlimit: 1.4;
}
path:nth-child(3) {
  stroke-miterlimit: 1.9;
}
path:nth-child(4) {
  stroke-miterlimit: 4.2;
}
path:nth-child(5) {
  stroke-miterlimit: 6.1;
}

规范

规范
CSS Fill and Stroke 模块 Level 3
# stroke-miterlimit

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅