在滚动上绘制弯曲（响应式）SVG 路径

在阅读了所有关于使用 strokeDashArray 技巧对 SVG 进行动画处理的讨论后，我终于找到了一些代码来将此功能连接到用户在屏幕上的滚动位置。电缆代码 blog.

这个想法很棒，但我有一条波浪形的、弯曲的路径，实际上在某一点上循环。因此，我将计算出的路径总长度除以得到一个良好的中间立场，但它仍然不够，当您滚动时，线路落后或领先。

以下是经过一些调整的代码片段示例：

$(document).ready(function(){

  $(window).scroll(function() {
    drawLine( $('#route'), document.getElementById('path') );
  });

  //draw the line
  function drawLine(container, line){

    var pathLength = line.getTotalLength(),
        distanceFromTop = container.offset().top - $(window).scrollTop(),
        percentDone = 1 - (distanceFromTop / $(window).height()),
        length = percentDone * pathLength / 30;

    line.style.strokeDasharray = [ length ,pathLength].join(' ');
  }

});

我制造了一个CodePen以及我的调整的路径和代码片段。关于如何在用户滚动时将这条线的末尾保持在视口中心的任何想法？

Updated:事实上，SVG 是响应式的。这改变了一些事情，是吗？这是更新的 CodePen.

您计算滚动百分比的方式有点偏差。我在这里制作了一个工作版本：

http://codepen.io/anon/pen/idvoh

您需要通过从文档高度减去窗口高度来计算出scrolltop的最大值。

至于当线路蜿蜒曲折时，如何阻止它领先或落后。您需要将线段间隔在常规高度。因此，例如，如果您的线条由 10 个贝塞尔曲线组成，请确保它们从线条高度的（大约）n/10 处开始。这应该保持正确的节奏。