Animation 在Internet Explorer中为曲线路径上的SVG设置动画

我正试图根据这篇文章沿着一条路径设置动画：

它在除Internet Explorer之外的所有浏览器中都能很好地工作。我读过很多关于伊江缺乏支持的帖子，但我仍然有足够的用户使用它，我需要考虑它。我可以将此转换为其他方法吗

这是我的代码（此处为简化图标，CodePen中为更复杂图标）：

吉普车测试5
#carRight{可见性：可见；}
#carLeft{可见性：隐藏；}
#carRightIsoBack{可见性：隐藏；}
#CarrightIsofFront{可见性：隐藏；}
#carLeftIsoBack{可见性：隐藏；}
#carLeftIsoFront{可见性：隐藏；}
#百分比{边框：1px纯红色；填充：5px；}
svg{边框：1px实心；溢出：可见；宽度：95vh；显示：块；边距：1em自动；}
.st0{填充：无；笔划：#F1EA0D；笔划宽度：5；笔划斜接限制：10；}
.st1{fill:#1A1A1A；}
.st2{fill:#FF0000；}
设pathlength=path.getTotalLength（）；
设pos=path.getPointAtLength（0）；
设置属性（null，“x”，位置x）；
设置属性（null，“y”，pos.y）；
document.getElementById（“百分比”）.textContent=“完成=0%”；
theRange.addEventListener（“输入”，（）=>{
设perc=parseInt（范围值）；
设leng=路径长度*perc/100；
pos=路径getPointAtLength（长度）；
设置属性（null，“x”，位置x）；
设置属性（null，“y”，pos.y）；
document.getElementById（“百分比”）.textContent=“Completion=“+perc+”%”；
}) 

---

此处演示：

代码的问题在JavaScript中

IE中不支持

=>

。您需要使用传统的函数表达式

IE中不会触发输入范围上的

input

事件。您需要使用

change

事件来监视输入范围的更改。但是

change

事件在其他现代浏览器中不会被触发，因此我们需要将这两个事件处理程序结合起来

我将函数定义为

moveit

，并将两个事件处理程序组合如下：

<input type="range" id="theRange" value="0" oninput="moveit()" onchange="moveit()" />

#carRight{
能见度：可见；
}
#卡莱夫特{
可见性：隐藏；
}
#背负{
可见性：隐藏；
}
#卡里特海滨酒店{
可见性：隐藏；
}
#卡列菲索巴克{
可见性：隐藏；
}
#卡列菲索夫隆酒店{
可见性：隐藏；
}
#百分比{
边框：1px纯红；
填充物：5px；
}
svg{
边框：1px实心；
溢出：可见；
宽度：95vh；
显示：块；
保证金：1em自动；
}
.st0{
填充：无；
行程：#F1EA0D；
笔画宽度：5；
行程限制：10；
}
.st1{
填充物：#1A1A；
}
.st2{
填充：#FF0000；
}

Yu Zhou，这把它修好了！我投了更高的票，但我太新了，没法展示。你是否推荐一些在IE中不起作用的功能指南？不幸的是，我需要支持它。关于IE中不起作用的函数，没有列表。通常，IE不支持ES6及以上语法。如果IE不支持该功能，控制台将显示错误。您可以在IE中使用F12开发工具检查是否有任何错误。对于“theRange”，即动画路径的百分比，我需要使用从数据库加载的数字，而不是在range表单元素上选择的数字。动画将在页面加载时播放。我正试图弄清楚我将以增量方式增加什么，直到长度=范围。我是否递增perc，直到它等于pathlength*perc/100；

<input type="range" id="theRange" value="0" oninput="moveit()" onchange="moveit()" />