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 "marker.svg"
file. I would like to copy exactly the same effect of this gif:
But to my visual perception it seems that only the top part of the marker is being animated.
In my code, The main problem is that the marker moves from its point of origin. This is my current result:
How can I make to match the animation of the gif?
Thank you.
<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",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);
})
</script>
</body>
y
location by the same amount in the negative direction -- so if the marker is 50 px high, growing by 50% would move the bottom point 25 px downward. Try changing y to its current location -25 px. But now that I think about it, it would be best to move the origin (0, 0) point of the marker to the tip of the symbol -- that way, scaling would not affect the apparent pointed-to location.