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 填充与描边模块 Level 3 # stroke-linejoin |
浏览器兼容性
加载中…