当圆改变大小时缩放图像图案

2024-04-28 • 问答

我这样创建图像模式：

<wsHttpBinding>
            <binding name="WSI_ROLESoap11">
              <security mode="Transport">
                <transport clientCredentialType="Ntlm"
                            />

              </security>
            </binding>
          </wsHttpBinding>

然后我像这样创建我的圈子：

    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('patternUnits','userSpaceOnUse')而不是.attr('patternContentUnits','objectBoundingBox')。
将<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);

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',30);
  });

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

您可以在此excellent answer中了解有关此内容的更多信息（不过不能重复）。

当圆改变大小时缩放图像图案

chen477293 回答：当圆改变大小时缩放图像图案

大家都在问