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

问题描述

我想为我的徽标制作动画，例如绘制它以显示它，它看起来像这样:

是否可以只用填充来绘制?我看过的每个教程都只展示了用笔画绘制的可能性.但我实际上想要与我的填充相同的绘图效果:

.st1{fill:black;}

这是我的完整 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屋！