js创建svg元素并插入到html中使用createElementNS

w3school中对svg的描述：https://www.w3school.com.cn/svg/svg_intro.asp
因其特殊性，使用一般的document.createElement(‘svg’)创建的svg在插入到html节点中无法正常显示尺寸。
需要使用document.createElementNS(‘http://www.w3.org/2000/svg’,‘svg’)创建的svg在插入到html节点中可以正常显示对其设置的宽高。
createElementNS的两个参数，第一个参数是svg的命名空间URI。
创建封装的方法
/*

• tag：所要创建的标签名称

• attrs: 所需要添加的属性，｛key:val,key:val｝
  */
  function makeSVG(tag, attrs) {
  const ns = ‘http://www.w3.org/2000/svg’;
  const xlinkns = ‘http://www.w3.org/1999/xlink’;

  let el= document.createElementNS(ns, tag);
  if (tag===‘svg’){
  el.setAttribute(‘xmlns:xlink’, xlinkns);
  }
  for (let k in attrs) {
  if (k === ‘xlink:href’) {
  el.setAttributeNS(xlinkns, k, attrs[k]);
  } else {
  el.setAttribute(k, attrs[k]);
  }
  }
  return el;
  }

可参考：https://blog.csdn.net/yiyueqinghui/article/details/108004272