[英]Image blurry when using url fill pattern for svg circle
我正在嘗試使用d3.js圓形打包示例使用SVG的圖案填充來填充一堆svg圓圈。 我的源圖像是800x600,但圓圈的大小不一。 我把它設置如下:
var patterns = defs.selectAll("pattern")
.data(nodes.filter(function(d){ return !d.children }))
.enter()
.append('pattern')
.attr('id',function(d){
return 'id'+d.id
})
.attr('x','0')
.attr('y','0')
.attr('height',function(d){ return d.r*2})
.attr('width',function(d){ return d.r*2*1.333333})
.append('image')
.attr('x','0')
.attr('y','0')
.attr('height',function(d){ return d.r*2})
.attr('width',function(d){ return d.r*2*1.333333})
.attr('xlink:href',function(d){
return 'img/img' + d.image;
})
var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.style("fill", function(d) {
if (!d.children){
return 'url(#id' + d.id + ')';
} else {
return d.children ? color(d.depth) : null;
}
})
所以我的DOM呈現如下:
<defs id="cdef">
<pattern id="id65" x="0" y="0" height="326.8534904318234" width="435.8045449579344">
<image x="0" y="0" height="326.8534904318234" width="435.8045449579344" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/img65.png"></image>
</pattern>
...
</defs>
我想通了。
圖案元素的高度和寬度似乎有點像比例/百分比。 所以寬度為“1”意味着它將填充它所設置的整個元素。 寬度“.25”表示該元素的25%。 然后,在<pattern>
您可以將圖像的高度和寬度指定為它們填充的圓的高度和寬度的實際像素值,因此在這種情況下,我的代碼更改為:
var patterns = defs.selectAll("pattern")
.data(nodes.filter(function(d){ return !d.children }))
.enter()
.append('pattern')
.attr('id',function(d){
return 'id'+d.id
})
.attr('x','0')
.attr('y','0')
.attr('height','1')
.attr('width','1')
.append('image')
.attr('height',function(d){ return d.r*2})
.attr('width',function(d){ return d.r*2*1.333333})
.attr('xlink:href',function(d){
return 'img/img' + d.image;
})
然后,因為圓形包布局放大,我必須確保也改變圖像的defs,所以:
function zoomTo(v) {
var k = diameter / v[2]; view = v;
defs.selectAll('image').attr('width',function(d){
return d.r*2*1.333333*k
}).attr('height',function(d){
return d.r*2*k
});
node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
circle.attr("r", function(d) { return d.r * k; });
}
如果您正在修改上面提到的bl.ocks.org示例,則需要它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.