javascript - 滚动控制的 SVG 动画有问题

Question

我正在尝试创建一个 SVG 插图，当用户在页面上滚动时会产生动画效果（实际上是田径图形上的简单路径进展）。

我试图遵循这个很酷的代码：https ://codepen.io/chardy/pen/vEBvNP

但是我得到了一些奇怪的结果：当我滚动时，路径没有得到与示例相同的行为（路径的奇怪进展，比如在开始时消失了，并且动画没有在正确的点开始和结束）。我对 SVG 了解不多，我认为问题就在那里，但我不知道是什么......

这是我在 codepen 上的代码https://codepen.io/patrick38/pen/ZVbwRe或就在这里，谢谢！：

$(document).ready(function() {
      $(".path").css("stroke-dashoffset", "1000");
      $(".path").css("stroke-dasharray", "1000");

      var $dashOffset = $(".path").css("stroke-dashoffset");

      $(window).scroll(function() {
        var $percentageComplete =
            $(window).scrollTop() / ($("html").height() - $(window).height()) * 100;

        var $newUnit = parseInt($dashOffset, 10);

        var $parsedPercentage = parseInt($percentageComplete, 10);

        var $offsetUnit = $percentageComplete * ($newUnit / 100);

        $(".path").css("stroke-dashoffset", $newUnit - $offsetUnit); //.star
      });
    });

.cls-1,
.cls-2 {
  fill: #b65534;
}

.cls-1,
.cls-5 {
  stroke: #fcfcfc;
}

.cls-1,
.cls-2,
.cls-3,
.cls-4,
.cls-5,
.cls-6,
.cls-8,
.cls-9 {
  stroke-miterlimit: 10;
}

.cls-2,
.cls-3,
.cls-4,
.cls-6 {
  stroke: #fff;
}

.cls-3 {
  fill: #fff;
}

.cls-4 {
  fill: #69953e;
}

.cls-5,
.cls-6,
.cls-8,
.cls-9 {
  fill: none;
}

.cls-7 {
  font-size: 12px;
  font-family: Myriad Pro;
}

.cls-8,
.cls-9 {
  stroke: #000;
}

.cls-9 {
  stroke-width: 3px;
}

#track {
  position: fixed;
  margin: auto;
  top: 20%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 80%;
  z-index: -1;
}

.empty-space {
  width: 100%;
  height: 3000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="empty-space" id="emptySpace"></div>
<svg id="track" xmlns="http://www.w3.org/2000/svg" width="732.77" height="427.38" viewBox="0 0 732.77 427.38">
    <path class="cls-1" d="M547.06,142.5H183.58c-100.16,0-164.77,70.72-145.63,159s114.74,159,214.89,159H616.32c100.16,0,165.85-70.72,146.72-159S647.22,142.5,547.06,142.5Z" transform="translate(-34.09 -33.62)"/>
    <path class="cls-2" d="M541.18,153.5H196.25c-95,0-156.75,65.81-139,147s108.07,147,203.11,147H605.28c95,0,157.79-65.81,140-147S636.22,153.5,541.18,153.5Z" transform="translate(-34.09 -33.62)"/>
    <path class="cls-2" d="M532.12,167.5H211.86c-88.25,0-145.87,59.2-129.74,133s99.67,133,187.91,133H590.3c88.25,0,146.83-59.2,130.69-133S620.36,167.5,532.12,167.5Z" transform="translate(-34.09 -33.62)"/>
    <path class="cls-2" d="M522,182.5H227.66c-81.11,0-134.31,52.92-119.87,119s91,119,172.1,119H574.26c81.11,0,135.19-52.92,120.74-119S603.13,182.5,522,182.5Z" transform="translate(-34.09 -33.62)"/>
    <path class="cls-3" d="M511.6,199.5H241.37c-74.46,0-124.13,45.2-111.55,102s82,102,156.48,102H556.52c74.46,0,124.94-45.2,112.36-102S586.06,199.5,511.6,199.5Z" transform="translate(-34.09 -33.62)"/>
    <path class="cls-4" d="M503.25,208.5H251.94c-69.25,0-115.52,41.59-104,93.5s76,93.5,145.29,93.5H544.56c69.25,0,116.27-41.59,104.73-93.5S572.5,208.5,503.25,208.5Z" transform="translate(-34.09 -33.62)"/>
    <line class="cls-5" x1="539.17" y1="366.25" x2="550.9" y2="426.88"/>
    <line class="cls-5" x1="519.69" y1="366.77" x2="531.32" y2="426.88"/>
    <line class="cls-6" x1="530.87" y1="373.39" x2="532.51" y2="381.88"/>
    <line class="cls-6" x1="531.24" y1="388.59" x2="532.88" y2="397.07"/>
    <line class="cls-6" x1="535.35" y1="388.59" x2="536.99" y2="397.07"/>
    <line class="cls-6" x1="532.61" y1="402.26" x2="534.25" y2="410.74"/>
    <line class="cls-6" x1="535.07" y1="414.91" x2="536.71" y2="423.39"/>
    <line class="cls-6" x1="537.31" y1="415.04" x2="541.28" y2="423.25"/>
    <line class="cls-6" x1="542.31" y1="415.14" x2="541.27" y2="423.28"/>
    <line class="cls-6" x1="536.01" y1="402.26" x2="537.65" y2="410.74"/>
    <line class="cls-6" x1="539.38" y1="402.3" x2="541.02" y2="410.78"/>
    <line class="cls-5" x1="552.76" y1="180.57" x2="592.89" y2="136.42"/>
    <path class="cls-5" d="M269.93,200c-2.05-31.81-13.24-58.54-25-59.78" transform="translate(-34.09 -33.62)"/>
    <line class="cls-5" x1="605.61" y1="345.21" x2="628.64" y2="358.42"/>
    <line class="cls-5" x1="643.77" y1="343.5" x2="667.51" y2="353.68"/>
    <line class="cls-5" x1="682.57" y1="328.67" x2="706.41" y2="335.8"/>
    <line class="cls-5" x1="712.3" y1="313.17" x2="731.66" y2="317.15"/>
    <path class="cls-9 path" d="M643.67,388.67c6.9-4,33.16-20.25,40.67-51.33,7.43-30.77-8.33-56.07-18.67-72.67-26.1-41.9-67.51-57.59-83.33-63.33a194.53,194.53,0,0,0-66-11.33c-129.09-1.54-180.12-3.33-276-.67a186.21,186.21,0,0,0-34,4c-15.77,3.33-34.94,7.39-52.67,20.67-7.61,5.7-29.05,23.66-35.33,52.67C107.89,314.9,147.8,354.8,157,364c26.42,26.41,56.79,34.85,75.33,40,21.76,6,37.54,6.58,81.33,7.33,60.89,1,91.34,1.57,107.33,1.33,38.41-.58,94.55-1.22,166.67-1.33" transform="translate(-34.09 -33.62)"/> <!-- i want to animate this path on scroll, and start it after the finish line, and end it at the finish line -->
</svg>

标签： javascriptjquerycsssvg