Snap.svg的可视化学习

最近公司有作人物画像的想法，东找找西找找，用了three、go.js、canvas等可视化。最后想经过svg来绘画，无心中看到张鑫旭的一个中文文档翻译：Snap

这里说一下为何看好一点Snap

首先是animate的属性，Snap可以使用animate属性给某个或者几个图形添加动画。

这里说一下，不少canvas动画都是经过requestAnimationFrame这个属性来进行帧动画，每次对canvas进行清除画布，而后从新渲染一遍，也许有人会说局部从新渲染或者item的渲染，可是这样也会产生复杂的计算量，也许能够经过vue那样的双向数据绑定来实现数据检查，我以前写过一个sgraphy的canvas组件，使用的就是requestAnimationFrame动画。

svg优点

svg的点击操做你能够很快的获取到你点击的量，而canvas你须要比对鼠标位置信息，计算得出你的鼠标位置和item之间的距离，若是须要添加上缩放、放大操做更加复杂一些。

demo

这里给一个Snap的小demo