如何使用 javascript 添加 svg？

Question

我正在使用此代码将 svg 插入到 div 标签中。

var container = document.getElementById("div_id");
var svg = document.createElement("svg");
svg.setAttribute("width",container.clientWidth);
svg.setAttribute("height",container.clientHeight);    
container.appendChild(svg);

在浏览器中使用开发人员工具进行检查时，svg 存在于 div 中。但是当我将鼠标悬停在开发人员工具中的 svg 上时，它显示“svg 0*0”，即即使宽度和高度属性设置为 500 和 400，我也无法在页面中查看它。我试图在 svg 中插入一条线，它再次可以在 svg 中看到，但在浏览器中不可见。需要帮忙。

Answer 1

使用

var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');

创建您的 SVG。也可以将它用于元素。

var circle = document.createElementNS("http://www.w3.org/2000/svg",'circle');

作品就像普通元素一样。