javascript - 动态更改 SVG 元素后对其进行动画处理

Question

Internet Explorer 不支持 SVG 动画的 beginElement，因此我正在寻找解决方法。我的目标是在用户控制下将一系列动画串在一起。下面的演示显示了两个动画来模拟吹气球的阶段。如果您在第一个动画后单击较小的气球

• 在 Chrome、Firefox 和 Opera 中:跳转到第二个动画的最后阶段 ()
• 在 Safari 中:它显示动画的开始，但从不动画
• 在 Internet Explorer 中:我根本看不到任何动画

是否有一种跨平台技术可以用来创建一系列动画，其中用户必须在每个动画之间进行干预？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px" viewBox="0 0 250 250">

  <defs>
    <path id="one"
        d="M 0 95 l 30 0 A 20 15 30 1 1 30 105 l -30 0 z"
        fill="blue">
     <animate
        attributeName="d"
        attributeType="XML"
        from="M 0 95 l 30 0 A 20 15 30 1 1 30 105 l -30 0 z"
            to="M 0 95 l 30 0 A 25 20 0 1 1 30 105 l -30 0 z"
        dur="1s"
        fill="freeze" />
      </path>


    <path id="two"
        d="M 0 95 l 30 0 A 25 20 0 1 1 30 105 l -30 0 z"
        fill="blue">
      <animate
        attributeName="d"
        attributeType="XML"
        from="M 0 95 l 30 0 A 25 20 0 1 1 30 105 l -30 0 z"
            to="M 0 95 l 30 0 A 50 40 0 1 1 30 105 l -30 0 z"
        dur="1s"
        fill="freeze" />
    </path>
  </defs>

  <use id="a" xlink:href="#one"/> 
  <use xlink:href="#two" transform="rotate(180 125 125)"/> 
</svg>

<script>
  var xlinkNS = "http://www.w3.org/1999/xlink"
  var use = document.querySelector("#a")

  use.onmouseup = inflate

  function inflate() {
    use.setAttributeNS(xlinkNS, "xlink:href", "#two")
  }
</script>

jsFiddle

Answer 1

Intenet Explorer 根本不支持 SMIL 动画。

通常推荐的 IE 解决方法是使用 Fakesmile library这为 IE 添加了 SMIL 支持。它支持 beginElement()。