javascript - 编辑路径剪辑以正确方式填充 svg

如何正确注册剪辑路径，以便正确填充线条，即沿着线条而不是像现在这样从上到下。屏幕截图显示了一个填充示例。在codepen 上，您可以看到整个 svg 并查看动画是如何工作的（它是通过滚动控制的）。

截图：

有问题的截图：

截图 3

现在对其进行剪辑路径（对于所有代码检查codepen）：

g.setAttribute('style', `clip-path: polygon(0 0%, 100% 0%, 100% ${progress+0.8}%, 0% ${progress+0.8}%);`)

更新： 如果您提供解决方案，请在我的示例中显示它。由于我的问题是具体的，并且大多数人只是在没有完全查看codepen上的问题的情况下编写。

标签： javascripthtmlcssanimationsvg

对于每条彩色线条，创建一条来回跟随该线条路线的路径。它的笔画宽度应该足够宽以覆盖最宽的线条。

然后，您使用该新行作为 a<mask>来显示您的颜色。

我对类似问题的回答中描述了基本思想。这个问题是关于模拟动画手写的。但同样的方法也会解决你的问题。

更新

你在回答之前检查了我的代码笔吗？

是的，我做到了。那里描述的技术非常适合您的情况。为了证明这一点，这是我自己的 CodePen：

这是一个概念证明。我只为一小部分路径创建了一个掩码路径。为了演示这个概念，我使用了一个简单的 CSS 动画，而不是实现一个 onscroll 处理程序。

发生的事情应该很明显。您只需要更改您的 onscroll 处理程序以stroke-dashoffset根据您滚动的距离来设置。

如果您不了解stroke-offset效果如何为线条长度设置动画，那么整个网络上都有很多教程，这里是 Stack Overflow。例如，CSS-Tricks 有一个非常好的：