stroke-linejoin
是一个 CSS 属性,它定义了 SVG 路径在两条线连接在一起的点处应该如何显示。stroke-linejoin
可以用来锐化或柔化 SVG 中连接线上的接头。
stroke-linejoin
也是一个 SVG 属性,可以使用 CSS 覆盖它。
stroke-linejoin: miter;

stroke-linejoin
只是影响两个路径交汇渲染的几个属性之一。最终的视觉效果将取决于 stroke-linejoin
以及其他 SVG 属性的值,例如 stroke-miterlimit
和 stroke-align
。
语法
stroke-linejoin: [ crop | arcs | miter ] || [ bevel | round | fallback ]
目前,浏览器似乎只支持 stroke-linejoin
的单个值。但是,根据 W3C CSS Fill and Stroke 模块工作草案,有一些想法是将两个值(一个来自 crop | arcs | miter
,一个来自 bevel | round
)结合起来,为 stroke-linejoin
创建组合效果。
值
stroke-linejoin
接受以下值
crop
将最小量延伸到拐角之外,以形成凸角。这实际上与miter
相同,只是crop
强制stroke-miterlimit
的行为,就好像它被设置为“1”的值一样。arcs
用与连接路径相同的曲率形成一个点。miter
在尖点处连接线条。bevel
垂直于接头裁剪连接点。round
与bevel
类似,除了添加圆形“圆角”边缘而不是直线。
示例
查看 Pen stroke-linejoin 示例
by CSS-Tricks (@css-tricks) on CodePen.
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
是 | 是 | 是 | 是 | 9+ | 4.4+ | 是 |