解决SVG animation 在IE中不起作用

2019年8月31日 152次阅读 来源: 乖摸摸头

问题描述

CSS animation没办法解决SVG路径运动的问题，下图路径运动的过程，通过查资料发现所有的IE的版本都不支持SVG animation。在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制作动画，后续把完整代码整理上传，先看下效果图
《解决SVG animation 在IE中不起作用》

总结

写东西的时候总是想着要对读者负责，但是知识有限，能完成并写出来希望能跟大家一起学习进步，有错希望能得到指点，喜欢希望能收到点赞。

更新

在开发过程中发现var pathLength = element.getTotalLength();
只能应用于path路径
这里还有另外一种实现方法，应用于path line 等
案例代码

    原文作者：乖摸摸头
    原文地址: https://segmentfault.com/a/1190000010902274
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞