与canvas不同的svg画图

svg画图API:

svg 画图适合做什么: 矢量图 图表 性能一般 交互容易

svg 属性
width height background
transform='rotate(30deg)' 错的 //svg中的图形旋转
transform='rotate(30,250,100)' 对的 //svg中的图形旋转 后两位为旋转中心

svg 在JS中如何操作属性和样式
    假设svg的id为#r1;
    var oR = document.querySelector('#r1');

属性:
        oR.setAttribute('属性','属性值')
样式:
        oR.style.样式名='样式值'

创建svg中的标签
    createElementNS （命名空间，标签）
    var oRect = document.createElementNS('http://www.w3.org/2000/svg','rect');

设置oRect的属性插入svg中    
    insertBefore -> 一样
    appendChild -> 一样

svg 标签
line //线
rect //矩形
circle //圆形
ellipse //椭圆
path //链接线

line 属性
x1 y1 x2 y2 四个点
stroke 边框颜色
stroke-width 边框宽度
stroke-opacity 边框透明
stroke-linecap="round" 线端点圆形一个边框的宽度
butt 默认
square 延伸一个边框的宽度
stroke-linejoin="bevel" 形状角斜切
miter 默认
round 圆形
stroke-dasharray 创建虚线
fill 填充颜色

rect 属性
x="100" y="100" 起始位置
width="200"
height="100"
rx="100" 横向半径
ry="50" 纵向半径

circle 属性
cx="100" cy="100" 起始位置
r="50" 半径

ellipse 属性
cx="300" cy="300" 起始位置
rx="300" 横向半径
ry="100" 纵向半径

path 属性
d="M291 299, L572 460, L727 353 Z"
M moveTo
L lineTo
Z 闭合
大写的时候
M 绝对定位 √
小写的时候
m 相对定位
L可以省略但是不要省略

如果Boss需要让咱们兼容IE6+可以使用以下插件:
raphael插件
官网 http://dmitrybaranovskiy.github.io/raphael/
api http://dmitrybaranovskiy.github.io/raphael/reference.html