Невозможно добавить изображение внутри SVG через jQuery: тег <image/"> становится <img />

Я хочу добавить элементы в SVG через jQuery. Я могу вставить теги, такие как <rect /> или <text />, но я не могу вставлять изображения с тегом <image />.

Этот тег автоматически становится <img />, который не может отображать изображение в SVG: http://jsfiddle.net/G4mJf/

Как я могу это предотвратить? Если это невозможно, есть ли другой способ вставить изображения в SVG с помощью JavaScript/jQuery.

Ответ 1

вы должны использовать 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);

Ответ 2

jQuery сам по себе не может правильно обрабатывать манипуляции SVG, как объясняет этот ответ. Вероятно, вы должны использовать Raphael или один из хакерских методов, описанных в приведенной выше ссылке.