自定义SVG进度条填充

Question

以最简单的形式，我想制作一个像这个网站一样的加载页面。

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

就像 SVG 剪辑蒙版进度条（或其他东西）。

拜托，请帮帮我！

谢谢，乔恩

Answer 1

最简单的方法是使用渐变填充。

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

您只需要将offset两个<stop>元素上的值更改为您想要的百分比 - 0->1 或“0%”->“100%”。例如：

一个示例函数可能是：

function setProgress(amt)
{
  amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt;
  document.getElementById("stop1").setAttribute("offset", amt);
  document.getElementById("stop2").setAttribute("offset", amt);
}

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

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

function setProgress(amt)
{
  amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt;
  document.getElementById("stop1").setAttribute("offset", amt);
  document.getElementById("stop2").setAttribute("offset", amt);
}

function setProgress(amt)
{
  amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt;
  document.getElementById("stop1").setAttribute("offset", amt);
  document.getElementById("stop2").setAttribute("offset", amt);
}

  
// Simple test of setProgress().
// We step up from 0 to 1 using timeouts
val = 0;
doTimeout();

function doTimeout() {
  setProgress(val);
  val += 0.01;
  if (val <= 1) {
    setTimeout(doTimeout, 30);
  }
}