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

Question

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

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

代码问题片段:

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

您需要设置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");

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