createElement("svg") 的大小为 0,0答案

【问题标题】：size of createElement("svg") is 0,0createElement("svg") 的大小为 0,0
【发布时间】：2016-10-12 11:10:11
【问题描述】：

我想用JS创建一个SVG并设置大小，但是当我使用createElement("svg")时，生成的HTML是

<svg class="jscreated" style="width: 500px; height: 400px;"></svg>

但 svg 大小显示为 0,0。

看这个例子：

var svg=document.createElement("svg");
document.body.appendChild(svg);
svg.setAttribute("class","jscreated");
svg.style.width="500px";
svg.style.height="400px";

&lt;svg class="HTML_SVG" style="width:500px; height:400px;" class="HTML_SVG"&gt;&lt;/svg&gt;

您可以看到由 JS 创建的 SVG 是 0,0，但直接用 HTML 编写的 SVG 应该是 500x400。 Chrome 检查器中的"==$0" 是什么意思？

【问题讨论】：

标签： javascript html svg

【解决方案1】：

createElement只能创建HTML元素，需要createElementNS

var svg=document.createElementNS("http://www.w3.org/2000/svg", "svg");
document.body.appendChild(svg);
svg.setAttribute("class","jscreated");
svg.style.width="500px";
svg.style.height="400px";

&lt;svg class="HTML_SVG" style="width:500px; height:400px;" class="HTML_SVG"&gt;&lt;/svg&gt;

【讨论】：