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

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 3 年前。

Improve this question

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

截图:

有问题的屏幕截图:

现在剪辑路径(对于所有代码检查 codepen ):

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

更新:如果您提供解决方案，请在我的示例中展示。由于我的问题是具体的，大多数人只是写而不完全查看 codepen 上的问题。 .

Answer 1

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

然后您可以使用该新行作为 <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 有一个相当不错的:

https://css-tricks.com/svg-line-animation-works/