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

Question

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

http://jsfiddle.net/SdN2F/7/

代码问题snipet：

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

Answer 1

您需要设置patternUnits的{​​{1}}属性。

pattern

jsFiddle：http://jsfiddle.net/chrisJamesC/SdN2F/11/