javascript - 随着圆圈大小的变化缩放图像图案

Question

我这样创建我的图像模式:

    mainSVG
      .append('defs')
      .append('pattern')
      .attr('id', `pic${vertex.id}`)
      .attr('patternUnits', 'userSpaceOnUse')
      .attr('x', -vertex.radius)
      .attr('y', -vertex.radius)
      .attr('width', vertex.radius * 2)
      .attr('height', vertex.radius * 2)
      .append('image')
      .attr('fill', 'red')
      .attr('xlink:href', vertex.picture)
      .attr('width', vertex.radius * 2)
      .attr('height', vertex.radius * 2);

我这样创建我的圈子:

    node
      .enter()
      .append('g')
      .attr('class', 'node')
      .call(force.drag)
      .append('svg:circle')
      .attr('r', x => x.radius)
      .attr('id', x => `node${x.id}`)
      .attr('class', 'nodeStrokeClass')
      .attr('stroke', 'gray')
      .attr('stroke-width', '2')
      .attr('fill', x => `url(#pic${x.id})`)
      .on('mouseover', function(v) {
        d3.select(`#node${v.id}`)
          .transition()
          .attr('r', v.radius * 1.5);
      })
      .on('mouseout', function(v) {
        d3.select(`#node${v.id}`)
          .transition()
          .attr('r', v.radius);
      });

如何让图片随圆圈缩放？

Answer 1

必要的更改很少:

1. 代替.attr('patternUnits', 'userSpaceOnUse') , 做 .attr('patternContentUnits', 'objectBoundingBox') .
2. 同时设置 <pattern> 的宽度和高度和 <image>至 1 (或 100% )。

这是生成的演示(将鼠标悬停在圆圈上):

const mainSVG = d3.select('svg');

const defs = mainSVG.append('defs')
  .append('pattern')
  .attr('id', 'foo')
  .attr('width', 1)
  .attr('height', 1)
  .attr('patternContentUnits', 'objectBoundingBox')
  .append('image')
  .attr('xlink:href', 'https://cdn2-www.dogtime.com/assets/uploads/2010/12/senior-dog-2.jpg')
  .attr('preserveAspectRatio', 'none')
  .attr('width', 1)
  .attr('height', 1);

const circle = mainSVG.append('circle')
  .attr('r', 30)
  .attr('cx', 150)
  .attr('cy', 75)
  .attr('stroke', 'gray')
  .attr('stroke-width', '2')
  .attr('fill', 'url(#foo)')
  .on('mouseover', function() {
    d3.select(this)
      .transition()
      .attr('r', 70);
  })
  .on('mouseout', function() {
    d3.select(this)
      .transition()
      .attr('r', 30);
  });

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

您可以在 excellent answer 中阅读更多相关信息(虽然不是重复的)。