在 Internet Explorer 中的曲线路径上为 SVG 设置动画
Posted
技术标签:
【中文标题】在 Internet Explorer 中的曲线路径上为 SVG 设置动画【英文标题】：Animating SVG on a curved path in Internet Explorer 【发布时间】：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">
#carRightvisibility: visible;
#carLeftvisibility: 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">
#percentageborder:1px solid red; padding: 5px;
svgborder:1px solid;overflow:visible; width:95vh; display:block; margin:1em auto;
.st0fill:none;stroke:#F1EA0D;stroke-width:5;stroke-miterlimit:10;
.st1fill:#1A1A1A;
.st2fill:#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; 【参考方案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>【讨论】：
以上是关于在 Internet Explorer 中的曲线路径上为 SVG 设置动画的主要内容，如果未能解决你的问题，请参考以下文章
Internet Explorer 中的 addEventListener
Internet Explorer 中的 CSS“未设置”/“初始”