1

私はSVGを使い始めたばかりです。SVG とまったく同じ DOM を使用しても、ディスプレイ上の結果が異なる場合があることに気付きました。

この js フィドル ( http://jsfiddle.net/ZHukw/ ) を見てください。SVG キャンバス内の単純な長方形です。

長方形ノードを HTML に直接コピー ペーストすると、長方形が表示されますが、Jquery を使用して長方形を追加すると、画面に表示されません。したがって、最終的な DOM 出力は同じですが、表示は異なります。

何か不足していますか？

HTML:

<svg id='svg'>

</svg>

JS:

$('#svg').attr('width',1600)
$('#svg').attr('height',1600)

$('#svg').append('<rect width="200" height="200" fill="black"></rect>')
4

1 に答える 1

6

要素をテキストとして追加する際の問題rectは、間違った名前空間 (SVG ではなく HTML) で解釈されることです。静的に指定する場合、名前空間はコンテキストから明らかです。

修正の 1 つは、正しい名前空間でノードを明示的に作成し、追加することです。

var el = document.createElementNS('http://www.w3.org/2000/svg', "rect");
el.setAttribute("width", 200);
el.setAttribute("height", 200);
el.setAttribute("fill", "black");
$('#svg').appendChild(el);
于 2013-09-06T14:38:46.527 に答える