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
来源:前端网
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论