如何绘制填充svg？

Question

我想为我的徽标添加动画效果，就像绘制它一样， 它看起来像那样：

是否可以仅使用填充进行绘制？ 我看过的每个教程都只显示了用笔画画的可能性。 但我实际上想要填充相同的绘图效果：

＆＃13;

＆＃13;

.st1{fill:black;}

＆＃13;

＆＃13;

＆＃13;

这是我的完整svg代码：

https://jsfiddle.net/b4dn44kL/

Answer 1

使用这样漂亮而简单的徽标，您可以使用笔划轻松伪造它：

1. 向您的SVG添加几条“假”行，stroke-width宽度足以覆盖徽标。
2. 在这些行上使用原始徽标路径（.st1）作为clipPath隐藏徽标外部的部分。
3. 为“假”线设置动画。 （How SVG Line Animation Works）



更新了小提琴：https://jsfiddle.net/b4dn44kL/1/

Answer 2

简短的回答是否定的。对于任意填充形状，没有简单的方法来获得“绘制线”效果。您可以使用线性填充的蒙版从上到下或从下到上“填充”它。但这显然会遵循环路周围线条的形状等。

你几乎坚持使用传统的动画技术：绘制一系列帧并一个接一个地显示它们。

Answer 3

这是我发现的渐变解决方案：

＆＃13;

＆＃13;

names = ["Sam", "Peter", "James", "Julian", "Ann"]
print(*names, sep=", ")

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/9mhxpbph/