如何绘制填充SVG？ [英] How to draw a fill svg?

问题描述

我想动画我的徽标，就像绘制徽标以显示它一样，
看起来像这样：

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

  .st1 {fill：black;}  

$ p
$ b

这是我的全部svg代码：

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

I want to animate my logo like drawing it for reveal it, it is looking like that:

is it possible to draw only with a fill? every tutorials i looked showed only the possibility to draw with strokes. but i actually want the same drawing effect with my fill:

.st1{fill:black;}

This is my full svg code:

https://jsfiddle.net/b4dn44kL/

解决方案

With a nice and simple logo like that, you can easily fake it by using strokes:

1. Add a couple of "fake" lines to your SVG with stroke-width wide enough to cover the logo.
2. Use the original logo path (.st1) as a clipPath on those lines to hide the parts that are outside the logo.
3. Animate the "fake" lines. (How SVG Line Animation Works)

Updated fiddle: https://jsfiddle.net/b4dn44kL/1/

这篇关于如何绘制填充SVG？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！