1、cycle
(1)cx cy r
(2)fill stroke stroke-width transparent
(3) style方式
2、rect
(1)width height x y
(2) rx ry
3、line
(1)x1 x2 y1 y2
(2)stroke-opacity

4、<g>標簽
是一個容器標簽，用來組合元素的
（1）只對于所有圖形共有的屬性起作用，例如stroke fill等屬性
（2）但是對于各個圖形特有的屬性，<g>標簽不能使用，但是可以使用transform:tanslate(0,0)來實現(xiàn)平移

<g transform="translate(0,0)" stroke-width="5" stroke="red">
     <circle r="40" fill="transparent"></circle>
     <circle r="30" fill="transparent"></circle>
     <circle r="20" fill="transparent"></circle>
</g>

5、<text>標簽
在svg中添加文本
（1）x y text-anchor
6、<image>標簽
（1）x y widht height
（2）xlink:href
7、創(chuàng)建SVG標簽

var svgNS='http://www.w3.org/2000/svg'
var oSVG=document.createElementNS(svgNS,'svg');
oSVG.setAttribute('xmls',svgNS);
oSVG.setAttribute('width':100%);
oSVG.setAttribute('height':100%);
var parent=document.getElementById('');
parent.appendChild(oSvg);

8、一個創(chuàng)建SVG標簽封裝

var svgNS='http://www.w3.org/2000/svg'
    var oSVG=document.getElementById("svgContent");
    function createTag(tag,objectAttributes){
        var tag=document.createElementNS(svgNS,tag);
        for(var key in objectAttributes){
            // tag[key]=objectAttributes[key];
            tag.setAttribute(key,objectAttributes[key])
        }
        return tag;
    }
    var svg=createTag('svg',{
        "xmlns":"svgNS",
        "width":"100%",
        "height":"100%"
    });
    var g=createTag('g',{
        "style":"cursor:pointer"
    })
    var line1=createTag('line',{
        "x1":"100",
        "y1":"100",
        "x2":"390",
        "y2":"200",
        "stroke":"#ACD2DE"
    })
    var line2=createTag('line',{
        "x1":"100",
        "y1":"100",
        "x2":"390",
        "y2":"200",
        "stroke":"transparent",
        "stroke-width":"6",
    })
    var rect=createTag('rect',{
        "x":"235",
        "y":"140",
        "width":"20",
        "height":"20",
        "fill":"#999",
        "rx":"5"
    })
    var text=createTag("text",{
        "x":"245",
        "y":"157",
        "fill":"white",
        "font-size":"20",
        "text-anchor":"middle"
    })
    oSVG.appendChild(svg);
    svg.appendChild(g);
    text.innerHTML="?";
    g.appendChild(line1);
    g.appendChild(line2);
    g.appendChild(rect);
    g.appendChild(text);

9、折線
polyline：折線
point: 空格（逗號）來隔開坐標點
10、路徑標簽
path 通過繪制坐標點形成一個想要的圖形，
-d屬性
M L H V A Z
C S Q T
M（起點位置，如果在路徑中重新設置一個，則有一個新的起點）
L（終點位置，如果在路徑中重新設置一個 ，則會繼續(xù)延伸）
Z（閉合位置，如果出現(xiàn)在一個有M L構成路徑中，則Z前面的路徑會閉合）
H（水平繪制，例如M50 100H200，H只用寫一個坐標值，因為水平繪制Y坐標肯定是已知的。V同理）
如果換成小寫，就是相對之前操作點的相對坐標。
A（繪制一段弧形
x半徑：
Y半徑：
角度：
弧長：（0小弧，1大弧）
方向：（0逆時針，1順時針）
終點X坐標：
終點Y坐標：
）