SVG 多段线学习笔记

什么是 SVG 多段线？

SVG 多段线是一种基于矢量图形的图形绘制方式，可以通过一些点来连接多条线段，达到绘制出各种图形的目的。

如何绘制 SVG 多段线？

使用 SVG 多段线需要使用 <polyline> 标签，通过给 <polyline> 标签的 points 属性设置多个点的坐标，就可以绘制出多条线段了。

htmlCopy Code
<svg width="100" height="100">
  <polyline points="0,0 50,50 100,0" stroke="black" fill="none" />
</svg>

上述代码可以绘制出一个由 3 条线段组成的三角形。

SVG 多段线的属性

除了 points 属性，SVG 多段线还有一些其他的属性可以设置：

• stroke：线条颜色
• stroke-width：线条宽度
• stroke-linecap：线条端点样式
• stroke-linejoin：线条拐角样式
• fill：填充颜色（如果 fill 属性为 none，则不填充）

实例

下面是一个例子，绘制了一个由多条线段组成的星形：

htmlCopy Code
<svg width="200" height="200">
  <polyline points="100,10 40,198 190,78 10,78 160,198"
            stroke="black" stroke-width="3" fill="yellow"/>
</svg>

通过设置不同的 points 值，可以绘制出各种形状。