问题描述

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 等
案例代码