解决svg标签在HTML中的渲染问题

在做项目时候我使用appendChild()方法将svg类的标签添加到DOM树中时，它竟然没有渲染。百科中说：SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。所以猜测可能是html与xml两种语言的差异造成的。

方法一：使用$(‘svg’).html()

<script>
  let html=`<circle xmlns="http://www.w3.org/2000/svg"  cx="${x0}" cy="${y0}" r="6" fill="#00ff00" stroke="#ffffff" stroke-width="3"   style="cursor: pointer;"/>`
  $('svg').html(html);
</script>

方法二:setAttribute()

let path=document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute(k,attr)


//函数封装
function makeSvg(tag, attrs){
       let el = document.createElementNS('http://www.w3.org/2000/svg', tag);
       for (var k in attrs)
         el.setAttribute(k, attrs[k]);
       return el;
},