title: Fill an image inside a circle d3.js?
body: <p>In this topic , I tried to put a photo inside a circle in transition, so I have this image  fanta.jpg <a href="https://i.stack.imgur.com/skwGx.jpg" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>I want to put the image inside a circle with d3.js , that's my code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="fr"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Titre de la page&lt;/title&gt;
    &lt;link rel="stylesheet" href=""&gt;
    &lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
    #cv{
      width: 100%;
    }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;defs&gt;
          &lt;pattern id="image" x="-32" y="-32" patternUnits="userSpaceOnUse" height="64" width="64"&gt;
              &lt;image  xlink:href="fanta.jpg"/&gt;
          &lt;/pattern&gt;
      &lt;/defs&gt;
     &lt;svg id="cv"&gt;
     &lt;/svg&gt;
       &lt;script&gt;
             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)
       &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The code begin with a svg that I created inside the html code ,I selected  properly the id of the svg , within css i gave a width 100% to the svg , then I added a height of 300 , finally I appended a circle to the svg where i tried to fill inside a photo fanta.jpg , that I put in transition , how can I fill the photo ??</p>