Changing mothionPath during animation is not working in Chrome - html

Question

I have an SVG animation where I move an object alongside a path. At some point I am changing the motion path.
While in Firefox the animated object follows the new path, in Chrome it continue to move on the old one. Does anyone knows why it happens and how can this be fixed?
Here is an example:
function change(){
elem = document.getElementById("Zuerich_Geneva");
elem.setAttribute('d','M382500,53500 C632500,53500 549500,80000 499500,181000')
}
setTimeout(function() { change(); }, 5000);
<svg xml:space="preserve" viewBox="480000 0 360000 240000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="airplane" overflow="visible">
<path stroke="blue" stroke-width="100" fill="lightgray" d="M-4000,0 a1000,300 0 0,1 1000,-300 H-1000 L1500,-3000 h400 L0,-300 h2000 L3000,-1500 h500 L2500,-50 V100 L3500,1500 h-500 L2000,300 h-2000 L1900,3000 h-400 L-1000,300 H-3000 a1000,300 0 0,1 -1000,-300"/>
</symbol>
</defs>
<g id="AnimationPaths">
<path id="Zuerich_Geneva" stroke="orange" stroke-width="2000" fill="none" d="M682500,53500 C632500,53500 549500,80000 499500,181000"/>
<use id="AirplaneZurichGeneva" xlink:href="#airplane">
<animateMotion id="animMotionZurGen" dur="10s" repeatCount="indefinite" rotate="auto-reverse" keyPoints="1;0" keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#Zuerich_Geneva"/>
</animateMotion>
</use>
</g>
</svg>
Thanks!

Answer 1

According to the SVG 1.1 spec, <mpath> is not animatable.
https://www.w3.org/TR/SVG/animate.html#MPathElementHrefAttribute
However, you are not actuall animating the <mpath>, you are animating the <path> that it is referencing. So I think it should work. It seems like a bug in Chrome, which you should report. However since Chrome have deprecated SMIL, they may not be interested in fixing it.
There are workarounds. For instance, you can define more than one <animateMotion> and switch between them. In the example below, I have programmed the switch in the animation. But you could also do it with JS.
<svg xml:space="preserve" viewBox="480000 0 360000 240000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="airplane" overflow="visible">
<path stroke="blue" stroke-width="100" fill="lightgray" d="M-4000,0 a1000,300 0 0,1 1000,-300 H-1000 L1500,-3000 h400 L0,-300 h2000 L3000,-1500 h500 L2500,-50 V100 L3500,1500 h-500 L2000,300 h-2000 L1900,3000 h-400 L-1000,300 H-3000 a1000,300 0 0,1 -1000,-300"/>
</symbol>
</defs>
<g id="AnimationPaths">
<path id="Zuerich_Geneva" stroke="orange" stroke-width="2000" fill="none" d="M682500,53500 C632500,53500 549500,80000 499500,181000"/>
<path id="Zuerich_Geneva2" stroke="orange" stroke-width="2000" fill="none" d="M382500,53500 C632500,53500 549500,80000 499500,181000"/>
<use id="AirplaneZurichGeneva" xlink:href="#airplane">
<animateMotion id="animMotionZurGen" dur="5s" repeatCount="indefinite"
rotate="auto-reverse" keyPoints="1;0.5" keyTimes="0;1"
calcMode="linear" begin="0s; animMotionZurGen2.begin + 5s">
<mpath xlink:href="#Zuerich_Geneva"/>
</animateMotion>
<animateMotion id="animMotionZurGen2" dur="5s" repeatCount="indefinite"
rotate="auto-reverse" keyPoints="0.5;0" keyTimes="0;1"
calcMode="linear" begin="animMotionZurGen.begin + 5s">
<mpath xlink:href="#Zuerich_Geneva2"/>
</animateMotion>
</use>
</g>
</svg>