javascript - createElement ("svg"的大小)为 0,0

Question

我想用 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";

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

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

Answer 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";

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