2012-04-21 8 views
12

Chcę dodać elementy w SVG za pośrednictwem jQuery. Umiem dobrze wstawiać tagi, takie jak <rect /> lub <text />, ale nie mogę wstawiać obrazów ze znacznikiem <image />.Nie można dodać obrazu wewnątrz SVG przez jQuery: <image /> tag staje się <img />

Ten znacznik staje <img /> automatycznie, który nie może wyświetlać obraz w SVG: http://jsfiddle.net/G4mJf/

Jak można temu zapobiec? Jeśli jest to niemożliwe, czy istnieje inny sposób wstawiania obrazów w SVG przy użyciu JavaScript/jQuery.

+1

spróbuje użyć mój jQuery włamać [http://stackoverflow.com/questions/11792754/create-and-access-svg-tag-with-jquery/14985470# 14985470] [1] [1]: http://stackoverflow.com/questions/11792754/create-and-access-svg-tag-with-jquery/14985470#14985470 –

Odpowiedz

16

należy użyć 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 samodzielnie nie poradzi sobie z manipulacją SVG, as this answer explains. Prawdopodobnie powinieneś używać Raphael lub jednej z hackowskich metod opisanych w powyższym linku.

Powiązane problemy