javascript - 如何用 2 个 SVG 制作自定义进度条？使用 Canvas ？

Question

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

我想将它与倒计时器结合起来，这样进度条开始完全填满，到计时器结束时应该只有背景。

我创建了这两个 .svg

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

我应该使用 html Canvas 吗？我可以用以下代码绘制箭头:

  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, );
  };

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

我怎样才能做到这一点，或者有没有比使用 Canvas 更好的方法？

Answer 1

正如其他人所建议的， Canvas 在这里看起来没有必要。如果有的话，它会使整个事情的表现更糟，因为您需要清除整个 Canvas 并在每个帧上重新绘制两个图像。这是使用 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="/image/2V4sE.png"></img>
<img class="empty" src="/image/HJtCo.png"></img>

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