Accepted answer

You need to listen for the "zoomanim" event and get the new center of your circle by doing the following:

var coord = map._latLngToNewLayerPoint(new L.LatLng(51.5, -0.087), e.zoom,;

The animation of the marker is performed by CSS, specifically the class selected ".leaflet-zoom-anim .leaflet-zoom-animated" (look in leaflet.css). You need to do something similar for your SVG. Instead of setting the "transform" attribute on your SVG, set a "transform" style and then define a transition animation for that style in your CSS.

See the following fiddle:

Related Query

More Query from same tag