svg基础|绘制svg直线、折线和多边形
SVG直线
SVG
上面代码的返回结果如下:

x1和y1属性用于指定直线的起点,x2和y2属性用于指定直线的终点。可以使用style属性来为直线设置颜色和描边宽度。
SVG折线
上面代码的返回结果如下:

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

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

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

使用
我们可以绘制更多条边的几何图形,下面是一个八边形的例子:

以上就是SVG基础|绘制SVG直线、折线和多边形的内容,更多相关内容请关注PHP中文网(www.php.cn)!










