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

最新推荐文章于 2025-11-18 04:05:53 发布

原创最新推荐文章于 2025-11-18 04:05:53 发布 · 5.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #svg

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在项目中遇到的SVG元素无法正确渲染的问题，并提供了两种解决方案：一是使用jQuery的html()方法；二是利用DOM API的setAttribute()方法。同时介绍了如何通过createElementNS()创建SVG元素。

在做项目时候我使用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;
},