SVG's preserve aspect ratio attribute not used in path animation

[robbertkooiman]

When you use the SVG attribute preserveaspectratio, the path's locations are incorrect for animation.

Minimal reproduction: https://codepen.io/robbertkooiman/pen/WNxvNBB

I would expect the animation to find and adhere to cropping of the SVG, so that it still does follow the actual path it's been assigned.

[cameralibre]

This sounds like it may be related to #556..? can you check and see if the solution proposed by #568 and #659 fixes this issue, too?

In case anyone else has problems with SVGs not following path inside of parent SVG. "Fixed" it by modifying lines 636 - 637 in anime.es.js. Removed svg.w and svg.h which yields

case 'x': return (p.x - svg.x);
case 'y': return (p.y - svg.y);

(from #556 (comment))

[juliangarnier]

I'm not going to change the way path coordinates are scaled when animating a dom element external to the SVG because this will need to cover a huge amount of edge cases.
When animating a DOM element along an SVG path, you have to keep in mind that the SVG and the animated element container should have the same dimensions.

In the upcoming v3.2.1, if the path styles required to be in a more complex SVG viewport (like in your example) you'll be able to animated an element inside the SVG without any problem.

You can see the difference between animating an element outside or inside the SVG with different viewport values here : https://github.com/juliangarnier/anime/blob/v3.2.1/documentation/examples/anime-svg-path-animation-responsive.html

Hope that helps!

[robbertkooiman]

@juliangarnier It did help! Thank you! I completely understand not wanting to change scaling for external elements if internal ones are already scaled correctly, but I had no idea that was the case. Your example worked perfectly to demonstrate the difference, it's a shame it's not featured more prominently on the documentation page.

Overall, an excellent framework you have here! I'm glad I could use it in this case.