SVG path路径动画ie上不支持解决方案

1.问题原因

svg path路径动画在ie上有兼容问题,兼容方案采用js调用去修改样式,让动画动起来

 

2.解决方案

js执行动态修改样式stroke-dashoffset,目前ie上对于stroke-width≥6的动画会卡住,尽量保持stroke-width<6,除非path路径特别简单,stroke-width可以突破6

        const element = document.querySelector('#svgPath')
        const pathLength = element.getTotalLength()
        let len = pathLength
        element.style.strokeDashoffset = len
        function animateRoute() {
            len -= 5
            // 行动路线进度
            element.style.strokeDashoffset = len
            // requestAnimationFrame执行
            window.requestAnimationFrame(animateRoute)
        }
        animateRoute()

 

版权声明:
作者:wuhou123
链接:https://wuhou.fun/396.html
来源:前端网
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录