在Internet Explorer中的弯曲路径上对SVG进行动画处理 [英] Animating SVG on a curved path in Internet Explorer
问题描述
I'm trying to animate along a path based on this post: move SVG group on path trail based on percentage of whole path trail
它在Internet Explorer以外的所有浏览器中均可正常运行.我已经阅读了很多有关IE中缺乏支持的帖子，但是我仍然有足够的用户在使用它，因此我需要考虑使用它.我可以将其转换为另一种方法吗?
It works beautifully in all browsers but Internet Explorer. I've read lots of posts about the lack of support in IE but I still have enough users that use it that I need to consider it. Can I convert this to another method?
这是我的代码(此处为简化图标，而在CodePen中为更复杂的图标):
Here is my code (simplified icon here, more complex icon in 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
推荐答案
您的代码问题在JavaScript中.
The issue of your code is in the JavaScript.
Arrow function
=>is not supported in IE. You need to use the traditional function expression.
在IE中不会触发输入范围内的 input 事件.您需要使用 change 事件来监视输入范围的变化.但是 change 事件不会在其他现代浏览器中触发，因此我们需要结合使用这两个事件处理程序.
The input event on input range won't be triggerrd in IE. You need to use change event to monitor the change of the input range. But change event won't be triggered in other modern browsers, so we need to combine the two event handlers.
我将函数定义为 moveit ，并结合两个事件处理程序，如下所示:
I define the function as moveit and combine the two event handlers like this:
<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进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
