在滚动上绘制一条曲线虚线 SVG

Drawing a curved dashed line SVG on scroll

本文关键字：曲线 虚线 SVG 一条 绘制 滚动      更新时间：2023-09-26

我的任务是添加一条虚线，该虚线将链接页面上的一堆插图。我已经搜索了一段时间，遇到了一些绘制没有破折号的正常线条的示例，例如我以前使用过的 http://cbron.github.io/blog/2013/12/30/draw-svg-path-on-scroll-tutorial/。

据我所知，这种技术不适用于虚线，因为它使用笔划虚线数组来实际制作线条的绘制动画。也许我错了？

有没有人知道用虚线达到相同效果的方法？另一件需要注意的事情是，这条线将在不同的颜色背景上移动。

任何建议将不胜感激。

更新：工作解决方案 

var line;
var subPaths = [];
window.onload = function(){
    line = Snap(document.getElementById("drawMe"));
    getSubPaths();
}
window.addEventListener("scroll", drawLine);
function drawLine() {
  var percentDrawn = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  var percentDrawn = Math.round(percentDrawn * 100);
  line.attr({
      d: subPaths[percentDrawn]
  });
}
function getSubPaths(){
    var maxLength = line.getTotalLength();
    for(var i = 0; i<101; i++){
        var currentLength = maxLength*i/100;
        subPaths[i] = line.getSubpath(0, currentLength);
    }
}

通过您指向 Snap 的链接.svg我想出了这个解决方案：

<script src="./snap.svg.js"></script>
<script>
    var line;
    var subPaths = [];
    var percentDrawn = 0;
    window.onload = function(){
        line = Snap(document.getElementById("drawMe"));
        getSubPaths();
        loop();
    }
    function loop(){
        setTimeout(function(){
            line.attr({
                d: subPaths[percentDrawn]
            });
            percentDrawn++;
            if( percentDrawn < 101) loop();
        }, 50);
    }
    function getSubPaths(){
        var maxLength = line.getTotalLength();
        for(var i = 0; i<101; i++){
            var currentLength = maxLength*i/100;
            subPaths[i] = line.getSubpath(0, currentLength);
        }
    }
</script>

因此，我们要做的是构建一个数组，其中包含原始行的子路径，从开始到其总长度的 x%：getSubPaths() 。为此，我们实际上需要 Snap.svg因为它为我们提供了getSubpath(0, currentLength)功能。

这其实就是所有的魔力！loop()函数只是一个setTimeout块，一旦我们完成绘图，就会中止条件。但是，实际绘图是将先前存储的数组中的相应子路径应用于行的d属性。

相关文章：