博客

在使用 SVG 时，需要使用 appendChild 来添加元素。但是如下的写法是不生效的：

let newElement = document.createElement('rect');
newElement.setAttribute('fill','orange');
newElement.setAttribute('width','200');
newElement.setAttribute('height','200');
document.getElementById('svg-drawing').appendChild(newElement);

在页面的’元素‘中可以看到加入的 rect，但是没有被渲染。

这时，可以采用如下的写法：

let newElement = document.createElementNS('http://www.w3.org/2000/svg','rect');
newElement.setAttribute('fill','orange');
newElement.setAttribute('width','200');
newElement.setAttribute('height','200');
document.getElementById('svg-drawing').appendChild(newElement);

即在创建 svg 元素时，需要指定

svg 的 namespace

。