通俗易懂的javascript动态创建svg的函数代码

js动态创建svg在制作网页时是经常使用到的，最简单最容易理解的用处就是如果需要多个相同的svg，如果一个一个地写<svg></svg>，即不好看，也多余，而动态创建，只需要创建一个，然后循环出来就可以了。

常规的动态创建svg

var svgNS = 'http://www.w3.org/2000/svg'; //必须需要，否则可能会导致svg不显示
var svg = document.createElementNS(svgNS, svg); //因为需要命名空间，所以使用createElementNS
var path = document.createElementNS(svgNS, path); //path也需要命名空间，否则会不显示
svg.setAttribute('id','svg1'); //给svg弄个id属性；
svg.setAttribute('viewBox','0 0 400 400'); //给svg弄viewBox属性
svg.setAttribute('width','400'); //给svg弄个宽度；
svg.setAttribute('height','400'); //给svg弄个高度；
svg.setAttribute('preserveAspectRatio','none meet'); ///给svg弄个保持纵横比属性

path.setAttribute('d','M0,0 L400,0 L400,400 L0,400 L0,0'); //画一个正方形
path.setAttribute('stroke','#f00'); //path边的颜色
path.setAttribute('strokeWidth','2'); //path边的大小
path.setAttribute('fill','#00f'); //path填充的颜色

svg.appendChild(path); //把path放进svg
document.body.appendChild(svg); //把svg放进body

封装函数后动态创建多个相同的svg

var obj = document.body;
var objChild = obj.getElementsByClassName('box');
var svgNS = 'http://www.w3.org/2000/svg';

function createTag(tag, objAttr){
    var oTag = document.createElementNS(svgNS, tag);
    for(var attr in objAttr){
        oTag.setAttribute(attr, objAttr[attr]);
    }
    return oTag;
}


for(var i=0, len = objChild.length; i<len; i++){
    var svgID = 'svg'+i;
    var svg = createTag('svg',{viewBox:'0 0 400 400', preserveAspectRatio:'none meet',id:svgID});
    var path = createTag('path',{stroke:'#f00', strokeWidth:'2', fill:'#00f',d:'M0,0 L100,0 L100,100 L0,100 L0,0'});
    svg.appendChild(path);
    objChild[i].appendChild(svg);
}