Javascript 使用svg圆形的url填充模式时图像模糊

我试图使用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%。然后，在

中，您可以将图像的高度和宽度指定为它们填充的圆的高度和宽度的实际像素值，因此在这种情况下，我的代码更改为：

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

然后，由于圆形包装布局放大，我必须确保更改图像的def，因此：

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示例，则需要该属性。

是否尝试使用

patternUnits

属性？我在svg中使用以下设置对图像执行了类似操作：

.attr（“patternUnits”、“objectBoundingBox”）

和

.attr（{“viewBox”：“0 0 1 1”}）

谢谢，遇到了这么多问题。我也遇到了同样的问题，您找到了解决方案吗？