0027. 使用属性 stroke-linejoin 设置线条连接处样式
- miter
>
尖角 - round
)
圆角 - bevel
]
平角
1. 💻 demos.1 - 使用属性 stroke-linejoin 设置线条连接处样式
xml
<!--
stroke-linejoin:设置折线连接点的形状
miter 尖角(默认)
round 圆角
bevel 平角
-->
<svg style="margin: 3rem;" width="500px" height="500px" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<polyline points="20 10,50 50,80 10" stroke="red" stroke-width="3" fill="none" stroke-linejoin="miter" />
<polyline points="20 30,50 70,80 30" stroke="red" stroke-width="3" fill="none" stroke-linejoin="round" />
<polyline points="20 50,50 90,80 50" stroke="red" stroke-width="3" fill="none" stroke-linejoin="bevel" />
</svg>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11