1. Web
  2. CSS
  3. stroke-miterlimit

stroke-miterlimit

Baseline 已广泛支持

该特性已非常成熟，可在多种设备和浏览器版本上使用。自 2017 年 4 月以来，它已在各大浏览器上可用。

stroke-miterlimit CSS 属性定义了当 SVG 元素描边路径的拐角样式为斜接（mitered join）时，斜接长度与 stroke-width 之比的限制。如果超出此属性定义的限制，拐角将从 miter 转换为 bevel（斜角），使拐角显示为截断状。

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

描述

当两条线段以尖角相交，并且 stroke-linejoin 指定为 miter 连接，或者默认为该值时，斜接可能会远远超出路径描边的线宽。stroke-miterlimit 比率用于定义一个限制，超过此限制后，连接将从斜接转换为斜角。

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

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

例如，1.414 的斜接限制会将小于 90 度的 theta 值对应的斜接转换为斜角，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;

值

<number>

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

正式定义

初始值4
应用于svg 中的 <circle>、<ellipse>、<line>、<path>、<polygon>、<polyline> 和 <rect> 元素
继承性是
计算值同指定值
动画类型按计算值类型

正式语法

stroke-miterlimit = 
  <number>

示例

不同的斜接限制

此示例演示了 stroke-miterlimit 属性不同值的影响。

HTML

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

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 填充与描边模块 Level 3
# stroke-miterlimit

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 于 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.