score:2

Accepted answer

I messed around with the "y" coordinate attr on the mouseover and mouseout, I get the result you're looking for.

<body>
  <script type="text/javascript">
    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", 50)
      .on('mouseover', function() {
        d3.select(this)
          .transition()
          .ease("bounce")
          .duration(500)
          .attr("height", widthMarker + 50)
          .attr("y", 17);
      })
      .on('mouseout', function() {
        d3.select(this)
          .transition()
          .ease("bounce")
          .duration(500)
          .attr("height", widthMarker)
          .attr("y", 50);
      })
  </script>
</body>

Here is the updated Plunkr.


Related Query

More Query from same tag