在svg圈子中使用url填充模式时，图像模糊 [英] Image blurry when using url fill pattern for svg circle

问题描述

我正在尝试使用 d3.js圈子打包示例来填充一堆带有SVG图案的SVG圆圈，其中包含图片.我的原始图片是800x600，但是圆圈的大小会有所不同.我将其设置如下:

I am trying to use d3.js circle packing example to fill a bunch of svg circles with images using SVG's pattern fill. My source images are 800x600, but the circles will be of varying sizes. I've set it up as follows:

  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呈现如下:

so that my DOM renders like this:

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

但是，当我这样做时，圆圈中的图像超级爆裂(请参阅附件图像).知道发生了什么吗?

But when I do this, the images in the circle are super blown-out (see attached image). Any idea what's going on?

推荐答案

我知道了.

图案元素上的高度和宽度似乎像比例/百分比一样起作用.因此，宽度为"1"表示它将填充设置为的整个元素.宽度".25"表示该元素的25％.然后，在<pattern>内，将图像的高度和宽度指定为它们要填充的圆的高度和宽度的实际像素值，因此在这种情况下，我的代码更改为:

The height and width on a pattern element seem to function sort of like a scale / percentage. So a width of "1" means it will fill the whole element it is set to. A width of ".25" means 25% of that element. Then, within the <pattern> you would specify the height and width of the image as the actual pixel value of the height and width of the circle they are filling, so in this case my code was changed to:

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

然后，因为圆包布局放大了，所以我必须确保也更改图像的清晰度，所以:

and then, because the circle pack layout zooms in, I had to make sure to change the defs of the image as well, so:

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示例，则需要

.

is needed if you're modifying the bl.ocks.org example mentioned above.

这篇关于在svg圈子中使用url填充模式时，图像模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！