2D矢量图-SVG(1)-创建流程(圆形为例)

SVG图形创建流程：

（1）创建画布标签

<svg id="svg" width="500" height="400">

    ...

</svg>

（2）添加圆环标签

<circle cx="" cy="" r="" fill="" stroke=""></circle>

cx,cy   圆心坐标

r          半径

fill        填充

stroke  描边

通过js在svg画布上动态创建元素

（1）字符串拼接方式来创建元素

var str="<circle></circle>";

svg.innerHTML=str;

（2）通过创建对象方式

var circle=document.createElementNS(

"http://www.w3.org/2000/svg",              #指定元素svg标准

"circle");

svg.appendChild(circle);

（3）为元素添加属性获取属性

设置与获取属性只能采用核心DOM方法不能使用HTML DOM

#核心DOM  circle.setAttribute("属性名