Javascript 圆形对象内的图像导致像素化d3 js

看来我已经按照正确的步骤用外部图像填充了一个圆。我尝试了许多不同的图像链接，但仍然无法解决这个像素化问题。感谢您的帮助，这里是我小提琴的链接：

代码问题：

var photoCircle = d3.select('svg')
                .append("circle")
                .attr("cx", width-160)
                .attr("cy", height-140)
                .attr("r", radius-35)
                .style("fill", "url(#photo)");

var image = d3.select('svg')
                .append("pattern")
                .attr("id", "photo")
                .attr("x", 0)
                .attr("y", 0)
                .attr("width", width-160)
                .attr("height", height-140)    
                .append("image")
                .attr("x", 0)
                .attr("y", 0)
                .attr("width", width-160)
                .attr("height", height-140)
                .attr("xlink:href", "http://static-1.nexusmods.com/15/mods/110/images/50622-1-1391287636.jpeg");

---

您需要设置

pattern

的

patternUnits

属性

var image = d3.select('svg').append('defs')
                .append("pattern")
                .attr("id", "photo")
                .attr("patternUnits","userSpaceOnUse")
                .attr("x", 0)
                .attr("y", 0)
                .attr("width", 2*radius)
                .attr("height", 2*radius)

.append("image")
                 .attr("x", 0)
                .attr("y", 0)
                .attr("width", 2*radius)
                .attr("height", 2*radius)
                .attr("xlink:href", "http://static-1.nexusmods.com/15/mods/110/images/50622-1-1391287636.jpeg");

---

jsFIDLE:

您必须适当地设置图案（即图像）的大小（例如）。哇，谢谢您的帮助。是的，我在发布答案后看到了：）