加载窗口时在路径上设置 SVG 动画
Posted
技术标签:
【中文标题】加载窗口时在路径上设置 SVG 动画【英文标题】：Animating SVG on a path when window loads 【发布时间】：2021-05-31 09:53:32 【问题描述】：我有一个 SVG，当范围滑块移动时，它会沿着路径设置动画：Animating SVG on a curved path in Internet Explorer
但是，我希望在窗口加载时出现动画。最好，我希望它动画到路径的百分比（theRange）。 theRange 是我在代码中更改的一个设定数字（它表示完成调查的人的百分比。我想保持某种方式来跟踪化身旅行的百分比，因为我想在“perc”时触发弹出窗口" 达到 40 和 60。客户端要求它在 IE 10 中工作。
在 CodePen 中：https://codepen.io/mrsgorgon/pen/yLVjaVL
以下是我目前所拥有的。什么都没有发生，但我也没有收到任何错误。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Avatar Simple Test 2</title>
<style type="text/css">
svgoverflow:visible; width:100vh; height: 100vh; display:block; margin:0 auto;
</style>
</head>
<body>
<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 432 254" style="enable-background:new 0 0 432 254;" xml:space="preserve">
<style type="text/css">
.st0fill:none;stroke:#F1EA0D;stroke-width:5;stroke-miterlimit:10;
.st1fill:#FF0000;
</style>
<path id="road" class="st0" d="M26.56,231.06c0,0,23.33-0.64,47.31,0.24s41.03-7.21,52.94-14.64c31.62-19.74,37.37-42.74-2.11-71.83
c-30.34-22.36-57.72-16.87-86.14-39.07C18.67,90.22,19.1,80.13,37.67,69.35C65.2,53.36,127.5,30.69,177.98,45.37
c48.84,14.21,42.63,26.64,39.96,54.17c-2.66,27.53-7.1,34.63-11.54,53.28s4.52,35.63,15.1,49.73c15.98,21.31,50.16,23.8,71.93,15.1
c8.88-3.55,29.3-15.1,25.75-42.63c-2.98-23.12-13.32-30.19-26.64-47.07s-4.41-22.8,6.22-23.98c15.98-1.78,28.93-1.61,52.39,6.22
c21.31,7.1,47.95,7.99,57.72,3.55c9.77-4.44,0.89-19.54-7.99-28.42s-12.43-15.1-26.64-21.31s-30.19-7.1-47.07-2.66
c-16.87,4.44-24.86,9.77-39.07,12.43s-23.09-8.88-15.98-22.2c7.1-13.32,19.54-24.86,37.3-33.75c3.55-1.78,3.16-1.2,3.16-1.2"/>
<defs>
<circle id="avatar" class="st1" cx="27.5" cy="230.5" r="14"/>
</defs>
<use id="theUse_avatar" transform="translate(-30,-230)" xlink:href="#avatar" />
</svg>
<script type="text/javascript">
let roadlength = road.getTotalLength();
let pos = road.getPointAtLength(0);
let theRange = 70;
theUse_avatar.setAttributeNS(null,"x", pos.x);
theUse_avatar.setAttributeNS(null,"y", pos.y);
function moveit()
let perc = parseInt(theRange.value);
let leng = 1;
while (leng < roadlength * perc / 100)
theUse_avatar.setAttributeNS(null, "x", pos.x);
theUse_avatar.setAttributeNS(null, "y", pos.y);
document.getElementById("percentage").textContent = "Completion=" + perc + "%";
leng++;
window.onload = moveit;
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：我已尝试根据您的要求修改您的上述代码示例。
修改代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Avatar Simple Test 2</title>
<style type="text/css">
svgoverflow:visible; width:100vh; height: 100vh; display:block; margin:0 auto;
</style>
</head>
<body>
<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 432 254" style="enable-background:new 0 0 432 254;" xml:space="preserve">
<style type="text/css">
.st0fill:none;stroke:#F1EA0D;stroke-width:5;stroke-miterlimit:10;
.st1fill:#FF0000;
</style>
<path id="road" class="st0" d="M26.56,231.06c0,0,23.33-0.64,47.31,0.24s41.03-7.21,52.94-14.64c31.62-19.74,37.37-42.74-2.11-71.83
c-30.34-22.36-57.72-16.87-86.14-39.07C18.67,90.22,19.1,80.13,37.67,69.35C65.2,53.36,127.5,30.69,177.98,45.37
c48.84,14.21,42.63,26.64,39.96,54.17c-2.66,27.53-7.1,34.63-11.54,53.28s4.52,35.63,15.1,49.73c15.98,21.31,50.16,23.8,71.93,15.1
c8.88-3.55,29.3-15.1,25.75-42.63c-2.98-23.12-13.32-30.19-26.64-47.07s-4.41-22.8,6.22-23.98c15.98-1.78,28.93-1.61,52.39,6.22
c21.31,7.1,47.95,7.99,57.72,3.55c9.77-4.44,0.89-19.54-7.99-28.42s-12.43-15.1-26.64-21.31s-30.19-7.1-47.07-2.66
c-16.87,4.44-24.86,9.77-39.07,12.43s-23.09-8.88-15.98-22.2c7.1-13.32,19.54-24.86,37.3-33.75c3.55-1.78,3.16-1.2,3.16-1.2"/>
<defs>
<circle id="avatar" class="st1" cx="27.5" cy="230.5" r="14"/>
</defs>
<use id="theUse_avatar" transform="translate(-30,-230)" xlink:href="#avatar" />
</svg>
<script type="text/javascript">
var roadlength = parseInt(road.getTotalLength());
var pos = road.getPointAtLength(0);
var theRange = 70;
theUse_avatar.setAttributeNS(null, "x", pos.x);
theUse_avatar.setAttributeNS(null, "y", pos.y);
function moveit()
var i;
for (i = 1; i <=theRange; i++)
var perc = i;
var myval= roadlength * perc / 100;
var path= road.value;
pos1 = road.getPointAtLength(myval);
task(i, myval, pos1);
function task(i,myval, pos1)
setTimeout(function()
theUse_avatar.setAttributeNS(null, "x", pos1.x);
theUse_avatar.setAttributeNS(null, "y", pos1.y);
document.getElementById("percentage").textContent = "Completion=" + i + "%";
, 100 * i);
window.onload = moveit();
</script>
</body>
</html>
在 IE 11 中输出（文档模式：IE 10）：
此外，您可以尝试根据自己的要求修改代码示例。
【讨论】：
完美！我知道我需要一个循环，但显然不知道如何编写它。这适用于 IE！以上是关于加载窗口时在路径上设置 SVG 动画的主要内容，如果未能解决你的问题，请参考以下文章