Smooth animation of changing Leaflet marker's position on setLatLng

gistfile1.txt

// just include d3js and add animaDur in ms to marker's option

L.SVG.prototype._setPath = function(layer,path){ 
	if(layer.options.animaDur)
		d3.select(layer._path).transition().duration(layer.options.animaDur).ease('linear').attr('d',path)
	else
		layer._path.setAttribute('d', path); 
}

Hello -- this functionality is exactly what I want, however upon trying to test it out, I'm getting the error that L.SVG is undefined. I'm definitely executing the code after both D3 and Leaflet are loaded... is L.SVG outdated or something, or am I misunderstanding how one would use this code? Thanks!

You may also do that with simple CSS transitions.

.leaflet-marker-pane > * {
  -webkit-transition: transform .3s linear;
  -moz-transition: transform .3s linear;
  -o-transition: transform .3s linear;
  -ms-transition: transform .3s linear;
  transition: transform .3s linear;
}

@gwendall thank you, the CSS approach is great

You may also do that with simple CSS transitions.

.leaflet-marker-pane > * {
  -webkit-transition: transform .3s linear;
  -moz-transition: transform .3s linear;
  -o-transition: transform .3s linear;
  -ms-transition: transform .3s linear;
  transition: transform .3s linear;
}

@gwendall, this is really nice for updating the markers. However, if a popup is open on the marker, the popup does not move smoothly. Do you know how this can be extended so that the popup moves smoothly too?

I tried the following:

.leaflet-popup-pane > * {
    -webkit-transition: transform .3s linear;
    -moz-transition: transform .3s linear;
    -o-transition: transform .3s linear;
    -ms-transition: transform .3s linear;
    transition: transform .3s linear;
}

But this did not work as expected.

If I'm using it inside SvelteKit, adding CSS doesn't seem to work. I assume because .leaflet-marker-pane doesn't exist until Leaflet does it's magic. Svelte seems to recognize it as an unused CSS selector. Any thoughts?