Animation 自定义SVG进度条填充

在其最简单的形式中，我想创建一个加载页面，如

我想使用一个自定义SVG徽标（我在illustrator中制作）并在页面加载时水平填充徽标

像SVG剪辑遮罩进度条（或其他东西）

请，请帮帮我

---

谢谢，Jon，最简单的方法是使用渐变填充

<linearGradient id="progress">
   <stop id="stop1" offset="0" stop-color="black"/>
   <stop id="stop2" offset="0" stop-color="grey"/>
</linearGradient>

这种方法适用于任何SVG元素，无论是文本（如下图所示），还是由路径组成的复杂徽标

功能设置进度（amt）
{
金额=（金额<0）？0：（金额>1）？1：金额；
document.getElementById（“stop1”）.setAttribute（“偏移量”，金额）；
document.getElementById（“stop2”）.setAttribute（“偏移量”，金额）；
}
//setProgress（）的简单测试。
//我们使用超时从0增加到1
val=0；
doTimeout（）；
函数doTimeout（）{
setProgress（val）；
val+=0.01；
如果（val）感觉我很接近了…它不能作为一个对象填充SVG，而且它也会在距离结束点有一点短的地方停止。它需要一条路径。因此，最简单的解决方案是将两个
d
属性连接在一条路径中。它没有完成的问题只是测试超时循环没有完成的问题“1.0”。如果您只是调用
setProgress（）
来自您的代码。这里有一个固定的提琴：太棒了！我尝试将其作为进度条进行测试。我添加了一个高分辨率图像并将其上传到这里……页面加载时不需要加载。它只是在设定的时间加载的吗？感谢您迄今为止的所有帮助，老实说，非常感谢。我添加的测试超时循环只是为了显示进度bar正在运行。它会持续固定的3秒钟左右。在实际场景中，您会在初始化的每个步骤后调用
setProgress（）
函数。例如，如果您必须加载五个大图像，您会在开始时调用
setProgress（0）
，然后调用
setProgress（0.2）
在第一个图像之后，然后
设置进度（0.4）
在下一个图像之后，依此类推。
function setProgress(amt)
{
  amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt;
  document.getElementById("stop1").setAttribute("offset", amt);
  document.getElementById("stop2").setAttribute("offset", amt);
}