问题描述

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