在d3.js圆圈内填充图像？答案

【问题标题】：Fill an image inside a circle d3.js?在d3.js圆圈内填充图像？
【发布时间】：2019-01-02 21:23:10
【问题描述】：

在这个主题中，我尝试将一张照片放在一个过渡的圆圈内，所以我有这张图片 fanta.jpg enter image description here

我想用 d3.js 将图像放在一个圆圈内，这是我的代码：

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
  #cv{
    width: 100%;
  }
  </style>
</head>
<body>
  <defs>
        <pattern id="image" x="-32" y="-32" patternUnits="userSpaceOnUse" height="64" width="64">
            <image  xlink:href="fanta.jpg"/>
        </pattern>
    </defs>
   <svg id="cv">
   </svg>
     <script>
           d3.select("#cv")
             .attr("height",300)
             .append("circle")
             .attr("r", 100)
             .attr('cx', 40)
             .attr('cy', 250)
             .attr('fill','url(#image)')
             .transition()
             .duration(4000)
            .attr('cx', 920)
     </script>
</body>
</html>

代码以我在 html 代码中创建的 svg 开头，我正确选择了 svg 的 id，在 css 中我给了 svg 100% 的宽度，然后我添加了 300 的高度，最后我附加了一个圈到 svg 我试图填充照片 fanta.jpg 的地方，我放入了过渡，我该如何填充照片？？

【问题讨论】：

标签： javascript html d3.js

【解决方案1】：

我不完全确定您想要实现什么，但也许下面的代码 sn-p 会帮助您。

请记住，pattern 完全按照它所说的去做，它创建了一个模式。因此，当您用图案填充圆圈，然后移动圆圈时，就好像圆圈正在显示下面图像的平铺图案。希望在您运行我的 sn-p 后这会更有意义。

d3.select("#cv")
 .attr("height",300)
 .attr("width", 300)
 .style("border", "1px solid red")
 .append("circle")
 .attr("r", 100)
 .attr("cx", 100)
 .attr("cy", 100)
 .attr("stroke", "black")
 .style("fill", "#000")
 .style("fill", "url(#image)")
 .transition()
 .duration(4000)
 .attr("cx", 300)

#cv{
    width: 100%;
  }

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg id="cv">
<defs>
 <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="200" width="200">
      <image x="0" y="0" href="https://i.stack.imgur.com/skwGx.jpg" width="200" height="200"></image>
    </pattern>
</defs>
</svg>

【讨论】：