Question

动态设置图像作为svg圆的背景是不行的。我已经通过将图像的url设置为SVG圆的fill属性来完成它。

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

这是fiddle。

有没有办法填写图片？

Answer 1

我修复了您的fiddle：

我使用setAttributeNS替换了不必要的setAttribute来电并添加了重要的setAttributeNS来电：

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);

用图像填充SVG Circle无效

1 个答案: