本节我们来学习如何在 SVG 中绘制曲折线，绘制曲折线可以使用 <polyline> 元素来实现。
如何绘制曲折线
曲折线就是通过一系列的直线连接多个点，然后组合成任意形状。曲折线可以通过 SVG 中的 <polyline> 元素来绘制。<polyline> 元素中的 points 属性用于定义绘制折线所需的点列表，即 x 和 y 坐标对。x 坐标和 y 坐标之间使用逗号分隔，坐标对之间使用空格分隔。
语法格式：
<polyline points="x1,y1 x2,y2 x3,y3 ... xn,yn"></polyline>
示例：
通过五个点创建一个曲折线：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500px" height="500px">
<polyline points="20,20 20,100 100,100 100,200 200,200" style="fill:none; stroke: #5ae6b7; stroke-width:3px;"></polyline>
</svg>
</body>
</html>
在浏览器中的演示效果：
曲折线会默认有一个黑色的填充色，如果要去掉这个填充色，可以将 fill 属性设置为 none。然后通过 stroke 属性设置曲折线的颜色，stroke-width 设置曲折线的宽度。
绘制一个带有填充色的梯形
我们已经知道了曲折线会默认带有一个黑色的填充色，这说明我们可以通过 fill 属性自己重新定义曲折线的填充色。
示例：
绘制一个紫色的梯形折线：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500px" height="500px">
<polyline points="20,150 50,50 150,50 180,150" style="fill:#d995eb; stroke: #5ae6b7; stroke-width:3px;"></polyline>
</svg>
</body>
</html>
在浏览器中的演示效果：
上图中，紫色部分就是曲折线的填充颜色，绿色是曲折线的线条颜色。可以明显看到，曲折线之间是不闭合的。
网友评论