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

【问题标题】：Animating SVG on a curved path in Internet Explorer在 Internet Explorer 中的曲线路径上为 SVG 设置动画
【发布时间】：2021-05-26 03:57:43
【问题描述】：

我正在尝试根据这篇文章沿路径制作动画：move SVG group on path trail based on percentage of whole path trail

它在除 Internet Explorer 之外的所有浏览器中都能完美运行。我已经阅读了很多关于 IE 缺乏支持的帖子，但我仍然有足够的用户使用它，我需要考虑它。我可以将其转换为另一种方法吗？

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jeep Test 5</title>
    <style type="text/css">
        #carRight{visibility: visible;}
        #carLeft{visibility: hidden;}
        #carRightIsoBack {visibility: hidden;}
        #carRightIsoFront {visibility: hidden;}
        #carLeftIsoBack {visibility: hidden;}
        #carLeftIsoFront {visibility: hidden;}
    </style>
    <script src="../SiteAssets/js/jquery-1.8.1.min.js"></script>
</head>

<body>
    <input type="range" id="theRange" value="0"/>
<div id="percentage"></div>
    
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 459 257" style="enable-background:new 0 0 459 257;" xml:space="preserve">
<style type="text/css">
    #percentage{border:1px solid red; padding: 5px;}
svg{border:1px solid;overflow:visible; width:95vh; display:block; margin:1em auto;}
    .st0{fill:none;stroke:#F1EA0D;stroke-width:5;stroke-miterlimit:10;}
    .st1{fill:#1A1A1A;}
    .st2{fill:#FF0000;}

</style>

<defs>
<g id="carRight" transform="translate(-90, -240)">
        <circle class="st3" cx="134.5" cy="215.2" r="12"/>
</g>
</defs>
        <path id="path" class="st0" d="M20.5,249.5c0,0,27,0,54,1s47.36-5,61-13c40.32-23.66,50.1-50.05,3-82c-35.12-23.83-65-19-97-44
    c-22.4-17.5-21.92-28.85-1-41c31-18,101.15-43.54,158-27c55,16,48,30,45,61s-8,39-13,60s5.09,40.12,17,56c18,24,56.49,26.8,81,17
    c10-4,33-17,29-48c-3.36-26.03-15-34-30-53s-4.97-25.67,7-27c18-2,32.57-1.81,59,7c24,8,54,9,65,4s1-22-9-32s-14-17-30-24
    s-34-8-53-3s-28,11-44,14s-26-10-18-25s22-28,42-38c4-2,9-4,9-4"/>
            <use id="theUse_car_right"  transform="translate(0,20)" xlink:href="#carRight" />

    </svg>

<script type="text/javascript">
    let pathlength = path.getTotalLength();
    let pos = path.getPointAtLength(0);

    theUse_car_right.setAttributeNS(null,"x", pos.x);
    theUse_car_right.setAttributeNS(null,"y", pos.y);

    document.getElementById("percentage").textContent = "Completion=0%";

    theRange.addEventListener("input", ()=>{
      let perc = parseInt(theRange.value);
      let leng = pathlength * perc/100;
      pos = path.getPointAtLength(leng);
      theUse_car_right.setAttributeNS(null,"x", pos.x);
      theUse_car_right.setAttributeNS(null,"y", pos.y);

        
    document.getElementById("percentage").textContent = "Completion=" + perc + "%";
       }) 
  
</script>
</body>
</html>

在这里演示：https://codepen.io/mrsgorgon/pen/ExNbEPN

【问题讨论】：

宇舟，完美解决！我赞成它，但我太新了，无法展示。您是否推荐任何有关在 IE 中不起作用的功能的指南？不幸的是，我需要支持它。
关于在 IE 中不起作用的功能，没有列表。通常，IE 不支持 ES6 及以上的语法。如果 IE 不支持该功能，控制台会显示错误。您可以在IE中使用F12开发工具来检查是否有任何错误。
对于“theRange”，即动画路径的百分比，我需要使用从数据库加载的数字，而不是在范围表单元素上选择的数字。动画将在页面加载时播放。我试图弄清楚我会逐渐增加什么，直到长度 = theRange。我是否会逐渐增加 perc 直到它等于 pathlength * perc / 100;

标签： animation internet-explorer svg path cross-browser

【解决方案1】：

您的代码的问题在于 JavaScript。

Arrow function => 在 IE 中不受支持。您需要使用传统的函数表达式。
输入范围上的input 事件不会在 IE 中触发。您需要使用change 事件来监控输入范围的变化。但是change事件不会在其他现代浏览器中触发，所以我们需要将这两个事件处理函数结合起来。

我将函数定义为moveit，并像这样组合两个事件处理程序：
```
<input type="range" id="theRange" value="0" oninput="moveit()" onchange="moveit()" />
```

完整的示例代码如下：

let pathlength = path.getTotalLength();
let pos = path.getPointAtLength(0);

theUse_car_right.setAttributeNS(null, "x", pos.x);
theUse_car_right.setAttributeNS(null, "y", pos.y);

document.getElementById("percentage").textContent = "Completion=0%";

function moveit() {
  let perc = parseInt(theRange.value);
  let leng = pathlength * perc / 100;
  pos = path.getPointAtLength(leng);
  theUse_car_right.setAttributeNS(null, "x", pos.x);
  theUse_car_right.setAttributeNS(null, "y", pos.y);
  document.getElementById("percentage").textContent = "Completion=" + perc + "%";
}

#carRight {
  visibility: visible;
}

#carLeft {
  visibility: hidden;
}

#carRightIsoBack {
  visibility: hidden;
}

#carRightIsoFront {
  visibility: hidden;
}

#carLeftIsoBack {
  visibility: hidden;
}

#carLeftIsoFront {
  visibility: hidden;
}

#percentage {
  border: 1px solid red;
  padding: 5px;
}

svg {
  border: 1px solid;
  overflow: visible;
  width: 95vh;
  display: block;
  margin: 1em auto;
}

.st0 {
  fill: none;
  stroke: #F1EA0D;
  stroke-width: 5;
  stroke-miterlimit: 10;
}

.st1 {
  fill: #1A1A1A;
}

.st2 {
  fill: #FF0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<input type="range" id="theRange" value="0" oninput="moveit()" onchange="moveit()" />
<div id="percentage"></div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 459 257" style="enable-background:new 0 0 459 257;" xml:space="preserve">
<defs>
<g id="carRight" transform="translate(-90, -240)">
    <circle class="st3" cx="134.5" cy="215.2" r="12" />
</g>
</defs>
    <path id="path" class="st0" d="M20.5,249.5c0,0,27,0,54,1s47.36-5,61-13c40.32-23.66,50.1-50.05,3-82c-35.12-23.83-65-19-97-44
    c-22.4-17.5-21.92-28.85-1-41c31-18,101.15-43.54,158-27c55,16,48,30,45,61s-8,39-13,60s5.09,40.12,17,56c18,24,56.49,26.8,81,17
    c10-4,33-17,29-48c-3.36-26.03-15-34-30-53s-4.97-25.67,7-27c18-2,32.57-1.81,59,7c24,8,54,9,65,4s1-22-9-32s-14-17-30-24
    s-34-8-53-3s-28,11-44,14s-26-10-18-25s22-28,42-38c4-2,9-4,9-4" />
    <use id="theUse_car_right" transform="translate(0,20)" xlink:href="#carRight" />
    </svg>

【讨论】：