在動態更改動畫後動畫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