Recently, the company has the idea of making portraits of people, and we have used three, Go.js, Canvas and other visualization methods. Finally, I wanted to draw with SVG. I came across a Chinese document translated by Zhang Xinxu: Snap
Here’s why you’re bullish on Snap
The first is the animate property, which Snap can use to animate one or more graphics.
Just to mention, many Canvas animations use requestAnimationFrame to animate frames. Each time the canvas is cleaned and re-rendered, some might say local re-rendering or item rendering, but this will also cause complex computation. It might be possible to implement data checking with two-way data binding like VUE. I wrote a Canvas component for Sgraphy that uses requestAnimationFrame animation.
SVG advantage
With SVG, you can quickly obtain the amount of your click, while with Canvas, you need to compare the mouse position information and calculate the distance between your mouse position and item. If you need to add zooming and enlarging operations, it will be more complicated.
demo
Here’s a little demo of Snap