stroke-linejoin

**stroke-linejoin** CSS 属性定义用于连接 SVG 元素描边路径的角点的形状。如果存在，它将覆盖元素的 stroke-linejoin 属性。

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

语法

css
/* keyword values */
stroke-linejoin: bevel;
stroke-linejoin: miter;
stroke-linejoin: round;

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

值

bevel

表示将使用斜角来连接路径段。斜角是通过用垂直于一条线的线截断角点来形成的，这条线平分路径段交汇处在连接点的角度差。

miter

表示将使用锐角来连接路径段。角点是通过在路径段的切线上延伸描边的外边缘直到它们相交而形成的。这是默认值。

round

表示将使用圆角来连接路径段。这是通过根据 bevel 裁剪连接，然后附加一个填充的切线弧来实现的，以使角点圆润。

以下值已定义，但在任何浏览器中都不支持

arcs

(不支持。) 表示将使用弧角来连接路径段。弧形是通过在连接点处延伸描边的外边缘来形成的，弧形与连接点处的描边的外边缘具有相同的曲率。

crop

(不支持。) 表示角点应超出连接点，超出量应为形成凸角所需的最小量。这在功能上等效于 miter（如上所述），其 stroke-miterlimit 值为 1。

fallback

(不支持；有风险。) 当 stroke-miterlimit 值超出时，其行为与 crop bevel 相同。

正式定义

数据库中未找到值！

正式语法

stroke-linejoin = 
  [ crop | arcs | miter ]       ||
  [ bevel | round | fallback ]

示例

连接线样式

此示例演示了 stroke-linejoin 的三个当前支持的关键字值。

HTML

我们设置了四个相同的路径，它们都具有宽度为一的黑色描边，并且没有填充。

html
<svg viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="none">
    <path d="M2,5  a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
    <path d="M8,5  a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
    <path d="M2,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
    <path d="M8,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
  </g>
</svg>

CSS

对四个路径中的每一个都应用了支持的连接线值。第一个是斜角，第二个是圆角，第三个是斜接，第四个也是斜接，但 stroke-miterlimit 为 2，这将强制角点变为斜角而不是斜接。

css
path:nth-child(1) {
  stroke-linejoin: bevel;
}
path:nth-child(2) {
  stroke-linejoin: round;
}
path:nth-child(3) {
  stroke-linejoin: miter;
}
path:nth-child(4) {
  stroke-linejoin: miter;
  stroke-miterlimit: 2;
}

结果

规范

规范
CSS Fill and Stroke 模块级别 3
# stroke-linejoin

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅