在使用 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。