Question

我有一个SVG动画，我在路径旁移动一个物体。在某些时候，我正在改变运动路径。

在Firefox中，动画对象遵循新路径，在Chrome中，它继续在旧路径上移动。有谁知道它为什么会发生？如何解决？

以下是一个例子：

＆＃13;

function change(){
	elem =  document.getElementById("Zuerich_Geneva");
  elem.setAttribute('d','M382500,53500 C632500,53500 549500,80000 499500,181000')
}
setTimeout(function() { change(); }, 5000);

＆＃13;

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

＆＃13;

谢谢！

Answer 1

根据SVG 1.1规范，<mpath>不可动画。

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

但是，您并未实际设置<mpath>的动画，您正在为其引用的＆lt; path>设置动画。所以我认为它应该有效。这似乎是Chrome中的一个错误，你应该report。但是，由于Chrome已弃用SMIL，因此他们可能不会对修复它感兴趣。

有解决方法。例如，您可以定义多个<animateMotion>并在它们之间切换。在下面的例子中，我已经在动画中编程了开关。但你也可以用JS做到这一点。

＆＃13;

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

＆＃13;

在动画期间更改mothionPath在Chrome中无效

1 个答案: