用图像填充SVG圆形不起作用

Question

将图像设置为动态svg圆形的背景不起作用。我通过将图像的url设置为SVG圆形的填充属性来完成它，如下所示。

document.getElementsByTagName('circle')[0].setAttribute("fill", "url(#img1)"); 

这里是fiddle。

有什么方法可以填充图像？

Answer 1

我固定您fiddle：

我取代不必要setAttributeNS呼叫与setAttribute并加入重要setAttributeNS呼叫：的[填充SVG路径元件与背景图像]

var circle = $('circle'); 

var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern"); 
pattern.setAttribute("id", "img1"); 
pattern.setAttribute("patternUnits", "userSpaceOnUse"); 
pattern.setAttribute("height", "100"); 
pattern.setAttribute("width", "100"); 
var image = document.createElementNS("http://www.w3.org/2000/svg", "image"); 
image.setAttribute("x", "0"); 
image.setAttribute("y", "0"); 
image.setAttribute("height", "100"); 
image.setAttribute("width", "100"); 
image.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", 
        "http://www.abcteach.com/free/c/circlergb.jpg"); 

pattern.appendChild(image); 
defs.appendChild(pattern); 
$(defs).insertBefore(circle);