SVG基础 | 绘制SVG直线、折线和多边形

时间：2016-03-08

　　SVG直线
　　SVG <line>元素用于绘制一条。下面是一个绘制直线的例子。

复制代码

　　上面代码的返回结果如下：

　　x1和y1属性用于指定直线的起点，x2和y2属性用于指定直线的终点。可以使用style属性来为直线设置颜色和描边宽度。

　　SVG折线

　　<polyline>元素用于绘制SVG折线。所谓折线就是多条衔接的直线。看下面的例子：

复制代码

　　上面代码的返回结果如下：

　　折线由多个点来定义。每一个点都有x和y属性。上面的例子中有三个点，它们组成了一个三角形。这3个点被直线连接，并被填充。默认的填充颜色是黑色。下面的例子中使用其它颜色来进行填充。

复制代码

　　你会发现上面的三角形只有两条边被填充了描边色，原因是只有两点之间的线会被使用描边色绘制出来。上面的代码中没有一个点指向起点。如果需要三条边都被绘制出来，还需要一个点来指向起点位置。

复制代码

　　和SVG直线一样，可以使用style属性来为折线设置颜色和描边宽度。

　　SVG多边形

　　<polygon>元素用于绘制SVG多边形。多边形是指三条或三条边以上的几何图形。看下面的SVG三角形的例子：

复制代码

　　使用<polygon>元素，虽然只有三个点，但是你会发现三条边都会被绘制出来。这是因为元素会绘制各个点之间的所有直线，包括最后一个点指向第一个点的直线。这是元素和code>元素的唯一不同之处。

　　我们可以绘制更多条边的几何图形，下面是一个八边形的例子：

复制代码

　　本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/ ... g/201506051978.html

上一篇：SVG基础 | 绘制SVG连接标记MARKERS 下一篇：SVG基础 | SVG TSPAN 元素