Search code examples
svgsvg-animate

SVG: animateMotion along animated path

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

  • This has been fixed, you can try a Firefox nightly to test it now, otherwise wait for Firefox 117.