HTML5学习(3) SVG的学习及应用五多点连线

最新推荐文章于 2025-10-11 14:35:10 发布

原创最新推荐文章于 2025-10-11 14:35:10 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5

HTML5 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用SVG中的<polyline>元素绘制多点连线。通过设置points属性定义各点坐标，实现不同形状的绘制。文章提供了一个具体示例，展示了从起点到终点的连续线条画法。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>

</svg>

多点连线:

标签:<polyline>

属性:points多点属性集合