svg html 鼠标滚轮交互,鼠标滚轮控制SVG线条动画

之前用D3制作图表是初次接触SVG，当时只顾感叹D3的强大了。后来当看到网站 Serio Verify 的时候，才意识到SVG用于制作可交互的页面动画是多么有意思。

于是自己也尝试在HTML页面中制作了一个鼠标滚轮控制的SVG线条动画，具体的效果是，随着滚轮的滑动，线条一点点出现，或者一点点隐藏。只需要几行JS代码旧可以实现。

首先得有标签

先得有一张SVG图。SVG图片中的形状有很多种，对应不同的标签，比如rect，circle，ellipse等等。但是我们这里需要用到的是path标签。如果不是，可以在不改变图形的前提下，转换成path标签。

我直接使用矢量图形编辑器Inkscape创建了一个简单的图形。

一个简单的SVG图形

然后把关键的代码放到HTML中。因为Inkscape生成的图片有很多属性在接下来制作的动画中是不需要的，所以我都删掉了。只留下svg标签和path标签。

path标签一定要有id，还要定义stroke和stroke-width，也就是线条的颜色和粗细。

放到body中的代码如下：

js/index.js就是控制动画的脚本文件了。

JS控制线条

控制path的显示和隐藏的原理是，改变stroke-dasharray和stroke-dashoffset的值(可以通过CSS设置)。

stroke-dasharray：一组由逗号或者空格间隔开的数值。定义虚线的