The animated path should be used, there's an open Firefox bug on that.
SVG: animateMotion along animated path
-
30-09-2022 - |
Question
When I use animateMotion along an animated path, Firefox (26) follow the original path while Opera (17) and Chrome (32) follow the changing path. For example, in the following svg the red rectangle ends at position of 100,10 in FF while at 50,10 in other browsers:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<path id="p" stroke="black" stroke-width="1" d="M 0,10 100,10"/>
<rect id="r" x="-5" y="-5" width="10" height="10" fill ="red"/>
<animate xlink:href="#p" attributeName="d" to="M 0,10 50,10" dur="5s" fill="freeze" repeatCount="1"/>
<animateMotion xlink:href="#r" dur="5s" fill="freeze" repeatCount="1">
<mpath xlink:href="#p"/>
</animateMotion>
</svg>
What is the correct behavior according to the SVG spec?
Solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow