javascript - 在滚动条上绘制曲线虚线 SVG 路径

Question

我正在尝试创建一条显示在滚动条上的 flex 虚线。我已经按照 https://css-tricks.com/scroll-drawing/ 上的教程进行操作.我将 svg 设为复合路径，但只有第一条曲线绘制在滚动条上。

我相信这与我的 svg 路径有关。

我根据原来的 css tricks 创建了一个代码笔。

https://codepen.io/stevejay12/pen/gOYWmPP

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="stevejay12" data-slug-hash="gOYWmPP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Scroll Drawing">
  <span>See the Pen <a href="https://codepen.io/stevejay12/pen/gOYWmPP/">
  Scroll Drawing</a> by stevejay12 (<a href="https://codepen.io/stevejay12">@stevejay12</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

最终结果应该类似于这个http://rickriordan.com/ .

Answer 1

破折号模式(动画)从每个子路径的开头开始。所以你的线的每个部分 - 和每个圆圈 - (作为子路径)同时绘制。

你需要让整个曲折的路径成为一条连续的线。不要将其分解为单独的子路径。

至于圈子。您需要对它们进行特殊处理。例如，您可以:

1. 让它们保持透明，然后在适当的时候让它们可见。
2. 设置两条动画效果相同的路径，不同之处在于一条绕过圆的一侧(一个半圆)，另一条绕过另一侧(另一个半圆)。