解决SVG animation 在IE中不起作用

转载

mob604756ec7b7c 2020-01-19 10:31:00

文章标签 javascript php 上传重置开发过程 文章分类 代码人生

问题描述

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中显示效果受到很多条件的限制，但是基本上可以运动起来了。案例代码