在滚动上绘制弯曲的虚线 SVG

Question

我的任务是添加一条虚线来链接页面上的一堆插图。我已经搜索了一段时间，遇到了一些没有破折号的法线绘制示例，例如我以前使用过的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);
    }
}

Answer 1

通过您指向 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 块，在我们完成绘图后具有中止条件。然而，实际绘图是将先前存储的数组中的相应 subPath 应用到您的行的 d 属性。