stroke-linejoin

Avatar of Andy Adams
Andy Adams on

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

stroke-linejoin 也是一个 SVG 属性,可以使用 CSS 覆盖它。

stroke-linejoin: miter;
Two paths joining with a miter joint
斜接接头

stroke-linejoin 只是影响两个路径交汇渲染的几个属性之一。最终的视觉效果将取决于 stroke-linejoin 以及其他 SVG 属性的值,例如 stroke-miterlimitstroke-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 垂直于接头裁剪连接点。
  • roundbevel 类似,除了添加圆形“圆角”边缘而不是直线。

示例

查看 Pen stroke-linejoin 示例
by CSS-Tricks (@css-tricks) on CodePen.

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
9+ 4.4+

相关

资源