时间戳

首页 > 解决方案 > SVG 用 JS 附加到 DOM 但没有视觉呈现

javascript - SVG 用 JS 附加到 DOM 但没有视觉呈现

问题描述

我正在尝试创建一个 SVG 形状并将其附加到我的 DOM 中的一个元素。

以下 JS 将 附加<svg>到预期节点，但不会在页面上呈现紫色背景：

const svgBox = document.createElement("svg");
svgBox.setAttribute('height', 150);
svgBox.setAttribute('width', 800);
svgBox.setAttribute('style', 'background-color:purple;');
const div = document.getElementsByTagName('div')[0];  // this does exist
div.appendChild(svgBox);

这是一个JSFiddle，显示了可以正常工作的等效 HTML（如果我重新注释标签），但上面的 JS 不起作用。我已经从一个更复杂的用例中剥离了这一点，并向自己证明了我缺少一些关键的基本显示原则。

标签： javascripthtmlsvg

解决方案

SVG 是一个命名空间元素，因此您必须使用createElementNS而不是createElement- 以了解为什么查看此答案

这是一个工作示例：

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

svgBox.setAttribute('height', 150);
svgBox.setAttribute('width', 800);
svgBox.setAttribute('style', 'background-color:purple;');

const div = document.getElementsByTagName('div')[0]; // this does exist
div.appendChild(svgBox);
<div>
</div>

推荐阅读