Ändern von MothionPath während der Animation funktioniert nicht in Chrome

Question

Ich habe eine SVG-Animation, wo ich ein Objekt neben einem Pfad verschieben. Irgendwann verändere ich den Bewegungspfad.

Während in Firefox das animierte Objekt dem neuen Pfad folgt, wird es in Chrome weiterhin auf dem alten verschoben. Weiß jemand, warum es passiert und wie kann das behoben werden? Hier

ein Beispiel:

function change(){ 
 
\t 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>

Dank!

Answer 1

Gemäß der SVG 1.1-Spezifikation ist <mpath> nicht animierbar.

https://www.w3.org/TR/SVG/animate.html#MPathElementHrefAttribute

Sie sind jedoch nicht die <mpath> Actuall Animieren, animieren Sie die < path> dass es verweist. Also ich denke, es sollte funktionieren. Es scheint wie ein Bug in Chrome, den Sie sollten report. Da Chrome SMIL jedoch nicht mehr unterstützt, sind sie möglicherweise nicht daran interessiert, das Problem zu beheben.

Es gibt Problemumgehungen. Zum Beispiel können Sie mehr als einen <animateMotion> definieren und zwischen ihnen wechseln. Im folgenden Beispiel habe ich den Schalter in der Animation programmiert. Aber du könntest es auch mit JS machen.

<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>