Javascript'te svg öğesine nasıl resim eklenir?

Question

Ben saf JavaScript bir svg elemanı inşa ediyorum, ama bunun resim eklemek başaramasanız:

var svgns = "http://www.w3.org/2000/svg"; 

var svgElement = document.createElementNS(svgns, "svg"); 
svgElement.setAttributeNS(null, "width", 100); 
svgElement.setAttributeNS(null, "height", 100); 

var shape = document.createElementNS(svgns, "circle"); 
shape.setAttributeNS(null, "cx", 25); 
shape.setAttributeNS(null, "cy", 25); 
shape.setAttributeNS(null, "r", 20); 
shape.setAttributeNS(null, "fill", "green"); 

var pngImage = document.createElementNS(svgns, "image"); 
pgnImage.setAttributeNS(null, "x", 0); 
pgnImage.setAttributeNS(null, "y", 0); 
pgnImage.setAttributeNS(null, "width", 100); 
pgnImage.setAttributeNS(null, "height", 100); 
pngImage.setAttributeNS(null, "http://www.freedos.org/images/logos/fdfish-glossy-plain.svg") 


svgElement.appendChild(shape); 
svgElement.appendChild(pgnImage); 

document.body.appendChild(svgElement); 

Here is my JSFiddle

Answer 1

neden sen karşın, bu href niteliğini ayarlamanız gerekir Bir svg görüntü ayarlarken pngImage değişkenini çağırmak benim dışımda.

pngImage.setAttributeNS("http://www.w3.org/1999/xlink", "href", "http://www.freedos.org/images/logos/fdfish-glossy-plain.svg") 

Ayrıca değişken pngImage veya pgnImage olup olmadığı kafası karıştı, bir tarayıcı ayıklayıcı bu sorunun sizi bilgilendirecektir.

Like so