之前用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：一组由逗号或者空格间隔开的数值。定义虚线的长度以及虚线之间间隔的长度。如果提供了奇数个值，则重复该值列表以产生偶数个值。例如，"20,10,5"产生的虚线大概如下：
设置stroke-dasharray的示例
stroke-dashoffset：用于定义虚线的位移，也就是第一根虚线开始的地方。
所以，根据页面滚动的百分比改变stroke-dashoffset的值，就可以实现线条一点点出现的效果了。
对应的JS代码如下：
// 获取path元素的引用
var path = document.querySelector('#infinite-path');
// 获取path的长度
var pathLength = path.getTotalLength();
// 设置足够长的虚线和虚线之间的间隔，这里直接设置了path本身长度
path.style.strokeDasharray = pathLength + ' ' + pathLength;
// 设置虚线的位移为path本身的长度，使得path看起来完全隐藏了
path.style.strokeDashoffset = pathLength;
// 获取元素的大小及其相对于视口的位置
// //animated-line-drawing-svg/
path.getBoundingClientRect();
// 监听页面的滚动事件
window.addEventListener("scroll", function(e) {
// 获取滚动的百分比
// /questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/2387222#2387222
var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
// 按照页面滚动百分比重新设置虚线的位移
var drawLength = pathLength * scrollPercentage;
path.style.strokeDashoffset = pathLength - drawLength;
// 当页面快滑到底时，移除虚线，否则形状不是很锐利
if (scrollPercentage >= 0.99) {
path.style.strokeDasharray = "none";
} else {
path.style.strokeDasharray = pathLength + ' ' + pathLength;
}
});
设置样式
最后设置图形的位置，把它固定在当前窗口中。对应的CSS代码：
body {
/* 足够高 */
height: 2000px;
}
#svg {
position: fixed;
top: 10%;
left: 10%;
width: 500px;
height: 500px;
}
参考链接
