キャンバスとSVGのオーディオウェーブイメージの相互作用

Question

私はshowing the wave image of the audio fileになるオーディオを再生するツールを構築しています。
オーディオ画像は、次のようになります。

UIは未演奏エリアとして別の色で再生エリアを示し、また、特定の領域にズームすることができます。

私は、キャンバスでこれを行うと音声での位置に応じてleft位置を変え、演奏/未再生エリアを表示するには上の層として不透明度div要素を追加することができます。代わりに、再生された/再生されていない領域で異なる色を表示するために、位置の更新が発生するたびに再レンダリングすることがあります。

キャンバスでのズームの可能性も再レンダリングされます。

私はまた、SVGでこれを行うことができ、この場合、ズームはおそらくeasyerだろう、と演奏エリアを示すことは、特定のpathまたはlineのstroke色の変化だろう。

私の質問：

が、これは「両方のオプションが有効である」シナリオです、または私は他の上tecnologiesの使用する必要があり、その理由は？

Answer 1

この場合、キャンバスを使用することをお勧めします。 SVGがキャンバス上に提供しなければならないものすべてDOM、ヒット検出、アニメーション、フィルタなどは使用されませんが、あなたのアプリケーションのパフォーマンスに悪影響を与えます。