svg

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

    <svg width="800" height="600">
        <line x1="100" y1="100" x2="300" y2="300" stroke="red" stroke-width="20"></line>
    </svg>

默认中心的是左上角

        需用要transform-origin:center center;改变 
    <svg width="800" height="600">
        <line x1="100" y1="100" x2="300" y2="100" transform="rotate(30,center,center)"></line>
    </svg>

矩形:rect

<svg width="800" height="600">
        <rect x="100" y="100" width="200" height="200"></rect>
    </svg>

圆:circle

<svg width="800" height="600">
        <circle cx="200" cy="200" r="100" stroke="#f00" stroke-width="20" stroke-opacity="0.5"></circle>
    </svg>

椭圆:ellipse

<svg width="800" height="600">
        <ellipse cx="200" cy="200" rx="100" ry="150"></ellipse>
    </svg>

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

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

<svg width="800" height="600">
        <line x1="100" y1="100" x2="300" y2="300" stroke="red" stroke-width="20" stroke-lineCap="butt"></line>
        <line x1="100" y1="200" x2="300" y2="400" stroke="red" stroke-width="20" stroke-lineCap="round"></line>
        <line x1="100" y1="300" x2="300" y2="500" stroke="red" stroke-width="20" stroke-lineCap="square"></line>
    </svg>

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

<svg width="800" height="600">
        <rect x="100" y="100" width="200" height="200" stroke="red"stroke-width="20" stroke-lineJoin="miter"></rect>
    </svg>

虚线:stroke-dasharray=""

<svg width="800" height="600">
        <line x1="100" y1="100" x2="500" y2="500" stroke="red" stroke-width="20" stroke-dasharray="10,5,15,20"></line>
    </svg>

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 闭合路径

<svg width="800" height="600">
        <path d="M100 200 L300 100 L400 200 Z"></path>
    </svg>

<svg width="800" height="600">
        <path d="M100,200 300,100 400,200 Z"></path>
    </svg>

<svg width="800" height="600">
        <path d="M100 200,L300 100,L400 200,Z"></path>
    </svg>

属性：

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

推荐阅读更多精彩内容