Question

在本主题中，我尝试将照片放置在过渡中的圆内，因此我将图像设置为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的高度，最后我附加了一个圈到我尝试在照片fanta.jpg中填充的svg，我将其过渡了，如何填充照片？

Answer 1

我不确定您要达到的目标，但是下面的代码片段可能会帮助您。

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

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>

将图像填充到圆形d3.js中？

1 个答案: