javascript - 即使使用命名空间后也无法附加到 SVG

Question

我正在尝试使用 JavaScript 将 circle 附加到 svg 元素。当我创建圆圈时，我发现您应该使用 createElementNS 而不是 createElement。我这样做了，圆圈确实出现在 HTML 中，但它仍然没有出现在页面中。这是我的代码:

let ns = 'http://www.w3.org/2000/svg';
let svg = document.getElementsByTagName('svg')[0];
let circle = document.createElementNS(ns, 'circle');

circle.setAttributeNS(ns, 'cx', 100);
circle.setAttributeNS(ns, 'cy', 100);
circle.setAttributeNS(ns, 'r', 10);
circle.style.fill = 'red';

svg.appendChild(circle);

输出为:

<svg><circle cx="100" cy="100" r="10" style="fill: red;"></circle></svg>

但是 View 是空的。查看 Codepen here.

Answer 1

使用createElementNS创建圆形元素后，您不需要setAttributeNS，您应该使用setAttribute函数:

var ns = 'http://www.w3.org/2000/svg';
var svg = document.getElementsByTagName('svg')[0];
var circle = document.createElementNS(ns, 'circle');

circle.setAttribute('cx', 100);
circle.setAttribute('cy', 100);
circle.setAttribute('r', 10);
circle.style.fill = 'red';

svg.appendChild(circle);

svg{ width: 100%; height: 100%; background-color: blue; }

<svg></svg>