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 に答える