html5-svg标签使用基础一

1.html5-svg 标签画圆（circle ）

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)r 属性定义圆的半径  stroke边框颜色。

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

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

</svg>

2.html5-svg 标签画椭圆 （ellipse ）

cx 属性定义圆点的 x 坐标、cy 属性定义圆点的 y 坐标、rx 属性定义水平半径、ry 属性定义垂直半径

<svg width="100%" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="300" cy="90" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>
</svg>