Không thể thêm hình ảnh bên trong SVG qua jQuery: <image /> thẻ trở thành <img />

Question

Tôi muốn thêm các mục vào SVG qua jQuery. Tôi cũng có thể chèn các thẻ như <rect /> hoặc <text /> nhưng tôi không thể chèn hình ảnh bằng thẻ <image />.

Thẻ này trở nên <img /> tự động, mà không thể hiển thị một hình ảnh trong SVG: http://jsfiddle.net/G4mJf/

Làm thế nào tôi có thể ngăn chặn điều này? Nếu không thể, có cách nào khác để chèn hình ảnh vào SVG bằng JavaScript/jQuery hay không.

Answer 1

bạn nên sử dụng 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); 

Answer 2

jQuery một mình không thể xử lý thao tác SVG đúng cách, as this answer explains. Có thể bạn đang sử dụng Raphael hoặc một trong các phương pháp hacky được mô tả trong liên kết ở trên.