SVG 外来对象在更改之前不显示

Question

我正在向 svg 元素添加一个外部对象，它是一个 id 为 'all' 的组。我这样做的时候没有出现异物。

但是，如果我使用 chrome 的检查元素工具，并在元素视图中对外部对象进行任何更改，该对象就会出现。

var panel = document.createElement('div');
panel.className = 'panel';

var foreign = document.createElementNS("http://www.w3.org/2000/svg", 'foreignobject');
foreign.setAttribute('width' , '202');
foreign.setAttribute('height', '122');
foreign.setAttribute('transform', 'translate(0 0)');

all.appendChild(foreign);

foreign.appendChild(panel);

这对我来说似乎很奇怪。我做错了什么？

谢谢，山姆

Answer 1

SVG 是一种区分大小写的语言，正确的标签名称是 foreignObject

SVG 外来对象在更改之前不显示

SVG Foreign Object not displaying until changed

html

javascript

svg

namespaces