关于音频波图像交互的Canvas vs SVG

Question

我正在构建一个播放音频的工具showing the wave image of the audio file 音频图像如下所示：

UI将以另一种颜色显示播放区域作为尚未播放的区域，并且还能够放大特定区域。

我可以使用画布执行此操作，并在顶部添加不透明度div作为显示播放/未播放区域的图层，根据位置更改left位置音频。另一种方法是每次更新位置时重新渲染，以显示播放/未播放区域中的不同颜色。

画布中的缩放可能性也是重新渲染的，我也会这样做。

我也可以在SVG 中执行此操作，在这种情况下，缩放可能更容易，并且显示播放区域将是特定{stroke颜色的更改1}}或path。

我的问题：

这是＆＃34;两个选项都有效＆＃34;的场景，还是我应该使用tecnologies而不是其他选项，为什么？

Answer 1

我建议在这种情况下使用canvas。 SVG必须通过画布提供的所有内容，例如： DOM，点击检测，动画，过滤器等将不会被使用，但会对您的应用程序的性能产生负面影响。