title: How can I animate the top of my svg element like in this gif using d3.js?
body: <p>I apologize if the title is not the right one, but I'm not sure what it should be.
  I'm trying to animate a marker that is a svg image contained in the <code>"marker.svg"</code> file. I would like to copy exactly the same effect of this gif:</p>
  
  <p><a href="https://i.stack.imgur.com/hOM0M.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hOM0M.gif" alt="enter image description here"></a></p>
  
  <p>But to my visual perception it seems that only the top part of the marker is being animated. </p>
  
  <p>In my code, The main problem is that the marker moves from its point of origin. This is my current result:
  <a href="https://i.stack.imgur.com/ojHsH.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ojHsH.gif" alt="enter image description here"></a></p>
  
  <p>How can I make to match the animation of the gif?</p>
  
  <p>Thank you.</p>
  
  <pre><code>  &lt;body&gt;
  
    &lt;script type="text/javascript"&gt;
  
      const svg = d3.select("body").append("svg").attr("width",1000).attr("height",1000);
  
      svg.append("circle").attr("r",5).attr("cx",253).attr("cy",102).style("stroke","#FF0000");
  
      var widthMarker=50;
      var img = svg.append("svg:image")
          .attr("xlink:href", "marker.svg")
          .attr("width", widthMarker)
          .attr("height", widthMarker)
          .attr("x", 228)
          .attr("y",53)
          .on('mouseover', function(){
            d3.select(this).transition().ease("bounce").duration(500).attr("height",widthMarker+50);
          })
          .on('mouseout', function(){
            d3.select(this).transition().ease("bounce").duration(500).attr("height",widthMarker);
          })
  
    &lt;/script&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/IqebfdBikFcezCnz2YxA?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/IqebfdBikFcezCnz2YxA?p=preview</a></p>