How to draw a fill svg?

问题

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/

回答1:

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

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

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

回答2:

The short answer is no. There is no easy way to have the "drawn line" effect for an arbitrary filled shape. You could use a mask of a linear fill to "fill" it from top to bottom, or bottom to top. But that obviously would follow the shape of the line around the loop etc.

You are pretty much stuck with using the traditional animation technique: draw a sequence of frames and show them one after the other.

回答3:

this is the gradient solution i found:

<defs>
    <lineargradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0">
	  <animate attributeName="stop-opacity" values="0; 1" begin="middle1.end" dur="1s" fill="freeze" />
	  </stop>
	  <stop offset="40%" style="stop-color:rgb(255,255,255);stop-opacity:0">
	   <animate attributeName="stop-opacity" values="0; 1" begin="2000ms" dur="1s" id="middle1" fill="freeze" /></stop>
	   <stop offset="70%" style="stop-color:rgb(255,255,255);stop-opacity:0">
	   <animate attributeName="stop-opacity" values="0; 1" begin="800ms" dur="2s" id="middle" fill="freeze" /></stop>
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:0">
	  <animate attributeName="stop-opacity" values="0; 1" dur="1s" id="down" fill="freeze" /></stop>
    </lineargradient>
  </defs>

https://jsfiddle.net/9mhxpbph/

来源：https://stackoverflow.com/questions/35095631/how-to-draw-a-fill-svg

标签

css

animation

svg

fill