解決SVG animation 在IE中不起做用

問題描述

CSS animation沒辦法解決SVG路徑運動的問題，下圖路徑運動的過程，經過查資料發現全部的IE的版本都不支持SVG animation。在IE中沒有水流動的效果。

主要代碼

<style>
svg #water_path {
    stroke-dasharray: 53, 200;
    stroke-dashoffset: -180;
    -webkit-animation: water 30s linear infinite;
    -moz-animation: water 30s linear infinite;
    -ms-animation: water 30s linear infinite;
    -o-animation: water 30s linear infinite;
    animation: water 30s linear infinite;

}

@keyframes water {
    0% {

        stroke-dashoffset: -200;
    }
    100% {

        stroke-dashoffset: 1000;
    }
}
@-ms-keyframes water {
    0% {

        stroke-dashoffset: -200;
    }
    100% {

        stroke-dashoffset: 1000;
    }
}
@-moz-keyframes water {
    100% {

        stroke-dashoffset: 1000;
    }
}

@-webkit-keyframes water {
    100% {

        stroke-dashoffset: 1000;
    }
}

@-o-keyframes water {
    100% {

        stroke-dashoffset: 1000;
    }
}

</style>

<script type="text/javascript">
    var element = document.getElementById("animpath");
    var pathLength = element.getTotalLength();
    element.style.strokeDashoffset = pathLength;
    function animateRoute(e, len) {

        len += 1;//每次偏移的位置
        if (len >= 1000) {
            //大於1000後重置初始偏移，重複運動
            len = -200;
        }
        //設置元素偏移
        element.style.strokeDashoffset = len;
        //10毫秒執行一次
        setTimeout(function () {
            animateRoute(e, len);
        }, 10);

    }
    animateRoute(element, pathLength);
</script>

<div class="svg-warp" style="background-color: #001020;height: 100%">
    <svg class="home-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 800">
        <path class="animate" id="animpath" fill="none" stroke="#F6B457" stroke-width="6"
              stroke-dasharray="53, 200" stroke-linecap="round" d="
            M595.87,381.5c3.75,75.25-102.441,73.5-104.667,8.917l0.097-16.092"/>
    </svg>
</div>

stroke-miterlimi 不能夠添加。stroke-width="6"的值要小於等於6.從網上查資料，有案例是大於6也能夠運行，感受多是簡單路徑的緣由，具體緣由不是很清楚，效果代碼以下，測試在IE中顯示效果受到不少條件的限制，可是基本上能夠運動起來了。案例代碼

完整效果

涉及到TweenMax製做動畫，後續把完整代碼整理上傳，先看下效果圖

總結

寫東西的時候老是想着要對讀者負責，可是知識有限，能完成並寫出來但願能跟你們一塊兒學習進步，有錯但願能獲得指點，喜歡但願能收到點贊。

更新

在開發過程當中發現var pathLength = element.getTotalLength();
只能應用於path路徑
這裏還有另一種實現方法，應用於path line 等
案例代碼