Chrome에서 애니메이션 중 mothionPath가 변경되지 않습니다.

Question

경로와 함께 객체를 움직이는 SVG 애니메이션이 있습니다. 어떤 시점에서 동작 경로가 변경됩니다.

Firefox에서 움직이는 객체는 새로운 경로를 따르지만 Chrome에서는 이전 객체로 이동합니다. 왜 그런 일이 일어나는 지 누구가 알고 있으며 어떻게 고칠 수 있습니까?

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>

감사 : 여기

은 예입니다!

Answer 1

SVG 1.1 사양에 따르면 <mpath>은 애니메이션 가능하지 않습니다.

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

그러나, 당신은 <mpath> 애니메이션 실제로 사용되지 않습니다, 당신은 참조하고있는 < path> 애니메이션된다. 그래서 나는 그것이 효과가 있다고 생각합니다. Chrome의 버그 인 것 같습니다. report. 그러나 Chrome은 SMIL을 사용하지 않으므로 수정에 관심이 없을 수 있습니다.

해결 방법이 있습니다. 예를 들어 하나 이상의 <animateMotion>을 정의하고 이들 사이를 전환 할 수 있습니다. 아래의 예에서는 애니메이션에서 스위치를 프로그래밍했습니다. 하지만 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>