如何正确注册剪辑路径，以便正确填充线条，即沿着线条填充，而不是像现在一样从上到下填充。截图显示了填写示例。关于codepen ，您可以看到整个 svg 并查看动画是如何工作的(通过滚动控制)。
截图:
有问题的屏幕截图:
现在剪辑路径(对于所有代码检查 codepen ):
g.setAttribute('style', `clip-path: polygon(0 0%, 100% 0%, 100% ${progress+0.8}%, 0% ${progress+0.8}%);`)
更新: 如果您提供解决方案，请在我的示例中展示。由于我的问题是具体的，大多数人只是写而不完全查看 codepen 上的问题。 .
最佳答案
对于每条彩色线，创建一条沿着该线来回移动的路径。它的笔画宽度应该足够宽以覆盖最宽的线条。
然后您可以使用该新行作为 <mask>展现你的色彩。
我对类似问题的回答描述了基本思想。这个问题是关于模拟手写动画。但同样的方法也可以解决您的问题。
https://stackoverflow.com/a/37787761/1292848
更新
Did you check my codepen before answer?
是的，我做到了。其中描述的技术非常适合您的情况。为了证明这一点，这是我自己的CodePen:
https://codepen.io/PaulLeBeau/pen/RwNOaZg
这是一个概念证明。我只为路径的一小部分创建了掩码路径。为了演示这个概念，我使用了一个简单的 CSS 动画，而不是实现 onscroll 处理程序。
发生的事情应该相当明显。您只需要更改 onscroll 处理程序即可设置 stroke-dashoffset基于您滚动的距离。
如果您不明白stroke-offset是如何效果可以对线条长度进行动画处理，然后网络上有很多教程，这里在 Stack Overflow 上。例如，CSS-Tricks 有一个相当不错的:
关于javascript - 编辑路径剪辑以正确方式填充 svg，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59905218/