在动态更改动画后动画SVG元素

对于SVG动画，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

来源

2015-10-22 James Newton