13

jQuery を使用して SVG に項目を追加したいと考えています。<rect />またはなどのタグを<text />挿入することはできますが、タグを使用して画像を挿入することはできません<image />。

このタグは<img />自動的に SVG で画像を表示できなくなります: http://jsfiddle.net/G4mJf/

どうすればこれを防ぐことができますか? 不可能な場合、JavaScript/jQuery を使用して SVG に画像を挿入する別の方法はありますか。

4

2 に答える 2

19

あなたが使用する必要がありますcreateElementNS()：

var img = document.createElementNS('http://www.w3.org/2000/svg','image');
img.setAttributeNS(null,'height','536');
img.setAttributeNS(null,'width','536');
img.setAttributeNS('http://www.w3.org/1999/xlink','href','https://upload.wikimedia.org/wikipedia/commons/2/22/SVG_Simple_Logo.svg');
img.setAttributeNS(null,'x','10');
img.setAttributeNS(null,'y','10');
img.setAttributeNS(null, 'visibility', 'visible');
$('svg').append(img);
于 2012-04-21T19:01:40.727 に答える
2

この回答が説明しているように、jQuery だけでは SVG 操作を適切に処理できません。おそらくRaphaelを使用するか、上記のリンクで説明されているハッキーな方法のいずれかを使用する必要があります。

于 2012-04-21T18:43:00.067 に答える