Javascript 使用jQuery在滚动条上绘制SVG线条

如何使用css为SVG“line”元素创建绘图动画。我想在卷轴上画线，效果平滑。有人有什么想法吗？我试图搜索这个，但我找不到线元素的效果。 以下是我的html和svg：

<div class="box">
<svg width="100%" height="100%">
  <line x1="0" y1="0" x2="0" y2="100%" stroke="gray" stroke-width="2"  />
  <line x1="0" y1="100%" x2="100%" y2="100%" stroke="gray" stroke-width="2"  />
</svg>
</div>
<div class="box2">
<svg width="100%" height="100%">
  <line x1="100%" y1="100%" x2="100%" y2="0" stroke="gray" stroke-width="2"  />
  <line x1="0" y1="100%" x2="100%" y2="100%" stroke="gray" stroke-width="2"  />
</svg>
</div>
<div class="box">
<svg width="100%" height="100%">
  <line x1="0" y1="0" x2="0" y2="100%" stroke="gray" stroke-width="2"  />
  <line x1="0" y1="100%" x2="100%" y2="100%" stroke="gray" stroke-width="2"  />
</svg>
</div>
<div class="box2">
<svg width="100%" height="100%">
  <line x1="100%" y1="100%" x2="100%" y2="0" stroke="gray" stroke-width="2"  />
  <line x1="0" y1="100%" x2="100%" y2="100%" stroke="gray" stroke-width="2"  />
</svg>
</div>

---

我只知道，您可以使用自定义javascript在路径中运行，也许您也可以将其用于一行：）

新的滚动编辑功能

//获取对
var path=document.querySelector（“#星形路径”）；
//获取路径的长度~在这种情况下是577px
var pathLength=path.getTotalLength（）；
//划很长的破折号（路径本身的长度）
path.style.strokeDasharray=路径长度+“”+路径长度；
//偏移虚线，使其显示为完全隐藏
path.style.strokeDashoffset=路径长度；
//杰克·阿奇博尔德是这么说的
// https://jakearchibald.com/2013/animated-line-drawing-svg/
getBoundingClientRect（）；
//当页面滚动时。。。
window.addEventListener（“滚动”，函数（e）{
//降价多少？
// https://stackoverflow.com/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=路径长度*滚动百分比；
//倒抽
path.style.strokeDashoffset=路径长度-绘图长度；
//完成后，移除虚线阵列，否则形状不太锐利
//模糊数学的解释
如果（滚动百分比>=0.99）{
path.style.strokeDasharray=“无”；
}否则{
path.style.strokeDasharray=路径长度+“”+路径长度；
}
});
正文{
/*随意改变高度*/
高度：5000px；
}
#星型svg{
位置：固定；
最高：50%；
左：50%；
宽度：150px；
高度：150像素；
利润率：-75px 0-75px；
}

您需要在路径中导出svg。然后可以根据视口添加滚动动画。这是运行您的实例的测试服务器。
但我想画20%的线，例如滚动不满，滚动越长，我添加了我的帖子，包括滚动功能：p@randomUserCopy Straight outta CSS-TRICKS@SudhirKaushik谢谢你，我不记得最初的来源，但我现在显然已经添加了它们。
.box{
    width: 100%;
    height: 300px;
    position: relative;
}
.box2{
    width: 100%;
    height: 300px;
    position: relative;
}