如何使用2个SVGS进行自定义进度栏？用画布？

Question

我正在尝试创建一个如下所示的自定义进度条：

我想将它与倒数计时器结合使用，因此进度条开始完全填满，并且到计时器结束时应该只有背景。

我创建了这两个 .svg

我想知道如何创建这个进度条。

我应该使用 html 画布吗？我可以用这段代码画出箭头：

  const ctx = this.arrow.getContext('2d');
  const img = new Image(200, 200);
  img.src = "../../../assets/positive-arrow-empty.svg";
  img.onload = () => {
    console.log('loaded', img);
    ctx.drawImage(img, 0, 0, 200, 200, );
  };

但我不知道如何截取图像并为整个过程设置动画。

我该怎么做？或者有比使用画布更好的方法吗？

Answer 1

正如其他人所建议的，画布在这里看起来没有必要。如果有的话，它会使整个事情变得更糟，因为您需要清除整个画布并在每一帧上重新绘制两个图像。这是一个使用clip-path的解决方案：

const full = document.querySelector('.full')
full.style.clipPath = 'inset(0 0 0 0)'

let time = 5000
const frequency = 50
let clipPercentage = 0
const id = setInterval(() => {
  full.style.clipPath = `inset(${clipPercentage}% 0 0 0)`
  clipPercentage += 100 / (time / frequency)
  if ((time -= frequency) <= 0) {
    clearInterval(id)
  }
}, frequency)

.full, .empty {
  position: absolute;
}
.full {
  z-index: 1
}

<img class="full" src="https://i.stack.imgur.com/2V4sE.png"></img>
<img class="empty" src="https://i.stack.imgur.com/HJtCo.png"></img>

此示例使用 PNG，但 SVG 应该以相同的方式工作。