stroke-linejoin
stroke-linejoin 属性是一个演示属性，用于定义描边路径时转角处的形状。
注意： 作为一个演示属性，stroke-linejoin 还有一个对应的 CSS 属性：stroke-linejoin。当同时指定两者时，CSS 属性具有优先权。
你可以将此属性与以下 SVG 元素一起使用
示例
html
<svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg">
<!--
Upper left path:
Effect of the "miter" value
-->
<path
d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
stroke="black"
fill="none"
stroke-linejoin="miter" />
<!--
Center path:
Effect of the "round" value
-->
<path
d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
stroke="black"
fill="none"
stroke-linejoin="round" />
<!--
Upper right path:
Effect of the "bevel" value
-->
<path
d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
stroke="black"
fill="none"
stroke-linejoin="bevel" />
<!--
Bottom left path:
Effect of the "miter-clip" value
with fallback to "miter" if not supported.
-->
<path
d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
stroke="black"
fill="none"
stroke-linejoin="miter-clip" />
<!--
Bottom right path:
Effect of the "arcs" value
with fallback to "miter" if not supported.
-->
<path
d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
stroke="black"
fill="none"
stroke-linejoin="arcs" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<g id="highlight">
<path
d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
stroke="pink"
fill="none"
stroke-width="0.025" />
<circle cx="1" cy="5" r="0.05" fill="pink" />
<circle cx="3" cy="2" r="0.05" fill="pink" />
<circle cx="5" cy="5.5" r="0.05" fill="pink" />
</g>
<use href="#highlight" x="6" />
<use href="#highlight" x="12" />
<use href="#highlight" x="2" y="6" />
<use href="#highlight" x="8" y="6" />
</svg>
使用语境
| 值 |
arcs | bevel | miter | miter-clip | round |
|---|---|
| 默认值 | miter |
| 可动画的 | 离散 |
arcs
注意： arcs 值尚未得到广泛支持。
arcs 值表示使用圆弧角来连接路径段。圆弧形状是通过将描边在连接点的外边缘向外延伸，形成与连接点处外边缘相同曲率的圆弧来创建的。
html
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of the "arcs" value -->
<path
d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
stroke="black"
fill="none"
stroke-linejoin="arcs" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<g id="p">
<path
d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
stroke="pink"
fill="none"
stroke-width="0.025" />
<circle cx="1" cy="5" r="0.05" fill="pink" />
<circle cx="3" cy="2" r="0.05" fill="pink" />
<circle cx="5" cy="5" r="0.05" fill="pink" />
</g>
</svg>
bevel
bevel 值表示使用斜角来连接路径段。
html
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of the "bevel" value -->
<path
d="M1,5 l2,-3 l2,3"
stroke="black"
fill="none"
stroke-linejoin="bevel" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<g id="p">
<path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
<circle cx="1" cy="5" r="0.05" fill="pink" />
<circle cx="3" cy="2" r="0.05" fill="pink" />
<circle cx="5" cy="5" r="0.05" fill="pink" />
</g>
</svg>
miter
miter 值表示使用尖角来连接路径段。该角是通过将描边在外边缘处沿着路径段的切线方向延伸直到它们相交而形成的。
注意： 如果超出了 stroke-miterlimit 的限制，则线条连接将回退到 bevel。
html
<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of the "miter" value -->
<path
d="M1,5 l2,-3 l2,3"
stroke="black"
fill="none"
stroke-linejoin="miter" />
<!-- Effect of the "miter" value on a sharp angle
where de default miter limit is exceeded -->
<path
d="M7,5 l0.75,-3 l0.75,3"
stroke="black"
fill="none"
stroke-linejoin="miter" />
<!-- the following red dotted line show where
the miter value falls back to the bevel value -->
<path
d="M0,0 h10"
stroke="red"
stroke-dasharray="0.05"
stroke-width="0.025" />
<!-- the following pink lines highlight the position of the path for each stroke -->
<g>
<path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
<circle cx="1" cy="5" r="0.05" fill="pink" />
<circle cx="3" cy="2" r="0.05" fill="pink" />
<circle cx="5" cy="5" r="0.05" fill="pink" />
<path
d="M7,5 l0.75,-3 l0.75,3"
stroke="pink"
fill="none"
stroke-width="0.025" />
<circle cx="7" cy="5" r="0.05" fill="pink" />
<circle cx="7.75" cy="2" r="0.05" fill="pink" />
<circle cx="8.5" cy="5" r="0.05" fill="pink" />
</g>
</svg>
miter-clip
注意： miter-clip 值尚未得到广泛支持。
miter-clip 值表示使用尖角来连接路径段。该角是通过将描边在外边缘处沿着路径段的切线方向延伸直到它们相交而形成的。
如果超出了 stroke-miterlimit 的限制，则尖角将被裁剪。裁剪距离等于 stroke-miterlimit 值的一半乘以描边宽度，从路径段的交点处开始。这比 miter 在非常尖锐的连接处或在动画的情况下能提供更好的渲染效果。
html
<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of the "miter-clip" value -->
<path
d="M1,5 l2,-3 l2,3"
stroke="black"
fill="none"
stroke-linejoin="miter-clip" />
<!-- Effect of the "miter-clip" value on a sharp angle
where de default miter limit is exceeded -->
<path
d="M7,5 l0.75,-3 l0.75,3"
stroke="black"
fill="none"
stroke-linejoin="miter-clip" />
<!-- the following red dotted line show where the clip should happen -->
<path
d="M0,0 h10"
stroke="red"
stroke-dasharray="0.05"
stroke-width="0.025" />
<!-- the following pink lines highlight the position of the path for each stroke -->
<g>
<path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
<circle cx="1" cy="5" r="0.05" fill="pink" />
<circle cx="3" cy="2" r="0.05" fill="pink" />
<circle cx="5" cy="5" r="0.05" fill="pink" />
<path
d="M7,5 l0.75,-3 l0.75,3"
stroke="pink"
fill="none"
stroke-width="0.025" />
<circle cx="7" cy="5" r="0.05" fill="pink" />
<circle cx="7.75" cy="2" r="0.05" fill="pink" />
<circle cx="8.5" cy="5" r="0.05" fill="pink" />
</g>
</svg>
round
round 值表示使用圆角来连接路径段。
html
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of the "round" value -->
<path
d="M1,5 l2,-3 l2,3"
stroke="black"
fill="none"
stroke-linejoin="round" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<g id="p">
<path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
<circle cx="1" cy="5" r="0.05" fill="pink" />
<circle cx="3" cy="2" r="0.05" fill="pink" />
<circle cx="5" cy="5" r="0.05" fill="pink" />
</g>
</svg>
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # LineJoin |
浏览器兼容性
加载中…
另见
- CSS
stroke-linejoin属性