Question

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

在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()。

Answer 2

我强烈推荐Snap.svg

编辑：SVG功能强大且复杂。无论是动态创建还是使用Adobe Illustrator或Sketch等工具，Snap.svg都能让您对svg动画进行大量控制。这是一个由Raphael（另一个svg动画库）编写的同一个人编写的跨浏览器解决方案

它使事情变得非常简单并且使用起来非常棒。因此，我强烈建议您使用Snap.svg，而不是摆弄你所拥有的东西。至少按照链接检查出来。很酷！

动态更改后动画SVG元素

2 个答案: