在滚动上绘制曲线虚线 SVG 路径答案

【问题标题】：Drawing Curved dashed SVG Path on Scroll在滚动上绘制曲线虚线 SVG 路径
【发布时间】：2019-12-31 17:08:55
【问题描述】：

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

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

我基于原始的 css 技巧创建了一个 codepen。

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/。

【问题讨论】：

虚线图案从每个子路径的开头开始。因此，您的行的每个部分（作为子路径）同时绘制。你需要让整个曲折的路径成为一条连续的线。
谢谢保罗，所以你的意思是曲线和圆圈必须是插画家中的一个元素？我试图加入他们，但我得到了一个错误。我确实让它们成为复合路径。
它必须是一条从头到尾的连续路径。复合路径不起作用。

标签： javascript css svg scroll

【解决方案1】：

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

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

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

让它们保持透明，然后在适当的时候让它们可见。
有两条路径的动画效果相同，除了一条绕过圆的一侧（一个半圆），另一条绕过另一侧（另一个半圆）。

【讨论】：