SVG绘制直线折现和多边形

SVG直线

< line > 标签用来创建线条。

<svg xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="0" y2="100" style="stroke:#006600;"/>
<line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/>
<line x1="20" y1="10" x2="100" y2="50" style="stroke:#006600;"/>
<line x1="30" y1="10" x2="110" y2="10" style="stroke:#006600;"/>
</svg>

返回结果:

20150902150045

代码解释:

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

SVG折线

< polyline >元素用于绘制SVG折线。所谓折线就是多条衔接的直线。

<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>

返回结果:

20150902150605

代码解释:

折线由多个点来定义。每一个点都有x和y属性。points=”x,y x,y … x,y”

SVG多边形

< polygon >元素用于绘制SVG多边形。多边形是指三条或三条边以上的几何图形。

 

<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="10,0 60,0 35,50"
style="stroke:#660000; fill:#cc3333;"/>
</svg>

返回结果:

20150902151156

代码解释:

points 属性定义多边形每个角的 x 和 y 坐标。points=”x,y x,y … x,y”

折线< polyline >也可以用来绘制多边形,但是与< polygon >不同的是,前者要描绘出每个点的坐标,包含最后的点,后者只要描述每个角的坐标即可,是个封闭的图形。