在 Internet Explorer 中的弯曲路径上动画 SVG

Question

我正在尝试根据此 post 沿着路径设置动画：

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

这是我的代码（此处为简化图标，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

Answer 1

您的代码问题在 JavaScript.

Arrow function =>。您需要使用传统的函数表达式。
输入范围的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>

在 Internet Explorer 中的弯曲路径上动画 SVG

Animating SVG on a curved path in Internet Explorer

animation

internet-explorer

svg

path

cross-browser