Question

我有一个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的对象代码时，我会在页面上看到我的对象。

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

Answer 1

永远不要在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时，会决定创建的元素类型。它不会改变。

在Javascript中将foreignObject附加到SVG

1 个答案: