js中使用SVG封装函数动态生成元素(vue)

使用svg动态创建元素

平常我们在js中向已有的svg标签动态内容，需要重复写生成dom，看着很长而且一旦修改也很麻烦，简单代码：

<svg
      xmlns="http://www.w3.org/2000/svg"
      width="200"
      height="200"
      ref="svgTags"
/>

js:

const svgNS = "http://www.w3.org/2000/svg"; //命名空间
let oSvg = document.createElementNS(svgNS, 'text'); //创建svg
oSvg.setAttribute('fill', 'red');
oSvg.setAttribute('width', 100);
//....
//多个svg属性


//添加到svg下面
let svgTag = this.$refs.svgTags;
svgTag.appendChild(oSvg);

如果上述代码要创建多个就很写的很多且不利于修改

 创建封装函数

将添加svg之前的代码写成一个函数

function createSvg (tag, obj) {
  //封装函数
  const svgNS = "http://www.w3.org/2000/svg"; //命名空间
  let oSvg = document.createElementNS(svgNS, tag); //创建svg
  //对传递的参数进行遍历添加
  for (let key in obj) {
    oSvg.setAttribute(key, obj[key]);
  }
  return oSvg; //返回对象
}

外部使用方法

//svg
let svgTag = this.$refs.svgTags;
//正方形
for(let i=0,i<widthArray.length;i++){
    let rect = createSvg("rect", {
      width: "80",
      height: "80",
      x: widthArray[i],    //存放坐标的位置x
      y: heightArray[i],    //存放坐标的位置y
      rx: "10",
      ry: "10",
      fill: "black",
    });

    //将上面的返回内容添加到svg
    svgTag.appendChild(rect)
}