svg

svg：画图-->矢量图 位图
兼容ie9+ chrome FF

默认中心的是左上角

        需用要transform-origin:center center;改变 
    

矩形:rect

圆:circle

椭圆:ellipse

svg属性   
    stroke
    stroke-width
    fill
    fill="none"         去除填充色
    fill-opacity
    stroke-opacity

stroke-lineCap=""       端点样式
    butt round square

stroke-lineJoin="" 链接点样式
miter round bevel

虚线:stroke-dasharray=""

svg运动:transtorm

创建标签
document.createElement() 创建html元素
document.createElementNS(命名空间,标签名)这个才是最靠谱的创建方式

var oS=document.querySelector('svg'); 
    var oRect=document.createElement('rect'); 
    oRect.setAttribute('x',100);
    oRect.setAttribute('y',100);    
    oRect.setAttribute('width',200);    
    oRect.setAttribute('height',200);


var oS=document.querySelector('svg');
    
    var oRect=document.createElementNS('http://www.w3.org/2000/svg','rect');
    
    oRect.setAttribute('x',100);
    oRect.setAttribute('y',100);    
    oRect.setAttribute('width',200);    
    oRect.setAttribute('height',200);
    
    oS.appendChild(oRect);  

路径：path
d="M L Z"
M moveTo
L lineTo
Z 闭合路径

属性：

var oLine=document.querySelectorAll('line')[1]; 
    oLine.addEventListener('click',function (){
        alert(this.getAttribute('y1'));
    },false);
oLine.addEventListener('click',function (){
        this.setAttribute('y1',200);
    },false);