svg个人小结

1path画格子，不要动态创建
2解决ie浏览器中文本对齐方式不一样问题，用dy控制文本垂直位置
3动态生成文本写法
var text= document.createElementNS(svgNS, 'text');
    text.appendChild(document.createTextNode(textContent));
    text.setAttribute('font-size',text_height);
    text.setAttribute('dy',text_height);
    text.setAttribute('fill','#fff');
    text.setAttribute('x',x0);
    text.setAttribute('y',y0);
    text.setAttribute('id','txt_'+i);
    parent.appendChild(text);
4动态生成图片，指定图片路径的写法
var image=document.createElementNS(svgNS,'image');
    image.href.baseVal = "../custom/bigscreen/img/close.png";
    image.setAttribute('width',text_height);
    image.setAttribute('height',text_height);
    image.setAttribute('x',xi);
    image.setAttribute('y',yi);
    image.setAttribute('id','img_'+i);
    parent.appendChild(image);
5动态生成形状的写法
var rect = document.createElementNS(svgNS, 'rect');
    rect.setAttribute('width',need_width);
    rect.setAttribute('height',title_height);
    rect.setAttribute('x', x0);
    rect.setAttribute('y', y0);
    rect.setAttribute('fill', '#237AE5');
    rect.setAttribute('fill-opacity', '.8');
    rect.setAttribute('id','bg_'+i);
    parent.appendChild(rect);
SVG绘图的特点——着重注意！
(1)所有的图形默认只有填充色（黑色），没有描边色。
(2)SVG图形的样式可以用元素属性声明，也可以用CSS形式来声明。但用CSS声明时，只能使用SVG专用的样式，不能使用CSS样式，如边框设置只能用stroke，而不用border！
(3)图形可以使用JS来对属性赋值；但不能使用HTML DOM形式，只能用核心DOM操作，如：
  r.x = 10;   r.width = 100;    //无效
  r.setAttribute('x', 10); r.setAttribute('width', 100)//有效
(4)动态添加SVG图形可以使用两种方式：
   1)HTML字符串拼接
       var html = `<rect></rect>`;
       svg.innerHTML = html;
   2)使用document.createElementNS('http://www.w3.org/2000/svg','标签名')创建