3

我有一个 ID 为“graphe”的 SVG 元素。我想在这个元素上附加一个包含段落的 foreignObject。我读到有必要在这个对象中有一个“身体”（这是真的吗？）。在所有情况下，这段代码都不起作用：

foreign = document.createElementNS('http://www.w3.org/2000/svg', "foreignObject");
foreign.setAttributeNS('http://www.w3.org/2000/svg', 'x', 250);
foreign.setAttributeNS('http://www.w3.org/2000/svg', 'y', 100);
foreign.setAttributeNS('http://www.w3.org/2000/svg', 'width', 500);
foreign.setAttributeNS('http://www.w3.org/2000/svg', 'height', 150);

body = document.createElement("body");
body.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');

texte = document.createElement("p");
texte.textContent = "EXAMPLE";

foreign.appendChild(body);
body.appendChild(texte);
document.getElementById("graphe").appendChild(foreign);

我不明白为什么。当我在 Chrome 中打开 DOM Inspector 时，我可以看到一切都在这里。但什么都没有显示。当我直接在源代码中重新复制对象的 DOM Inspector 代码时，我会在页面上看到我的对象。

[编辑] JSFiddle 演示：http: //jsfiddle.net/uwZja/

4

1 回答 1

2

永远不要将 svg 命名空间用于 svg 中的属性。

改变：

foreign.setAttributeNS('http://www.w3.org/2000/svg', ...

至：

foreign.setAttributeNS(null, ...

或者：

foreign.setAttribute("x", ...

此外这部分：

body.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');

除非您想将文档序列化为字符串，否则它是相当无用的。它没有任何影响，创建的元素类型是在你调用时决定的createElement/createElementNS。它没有改变。

于 2013-04-24T09:11:39.827 回答