How do I make a picture in SVG appear gradually?

Question

I want to make animations with that...

Answer 1

Draw a line using path, then use animate tag to animate stroke-dashoffset from a number larger than line length to 0 with stroke-dasharray equals to line length or larger.

Example:

<svg width="300" height="300">
<path id="path1" d="m167.5,82.4375c56,2 66,24 66,64c0,40 -1,102 -1.5,101.5625c0.5,0.4375 -7.5,27.4375 -60.5,28.4375c-53,1 -60,-7 -59,-32c1,-25 2,-100 1.5,-100.4375c0.5,0.4375 -2.5,-63.5625 53.5,-61.5625z" stroke-width="1.5" stroke="#000" fill="#fff" stroke-dasharray="1000" stroke-dashoffset="1000" />
<animate
xlink:href="#path1"
attributeName="stroke-dashoffset"
dur="10s"
form="1000"
to="0"
repeatCount="1"
fill="freeze" />
</svg>

https://code.sololearn.com/WMmkXpP0dRRE/?ref=app

Answer 2

I'm not really that experienced with animations so this solution took me quite a while (even had to look back at the lesson 😣).
Anyway you can just change the div selector to select your svg picture (if your using a lot of different svg elements that aren't nested inside an element to group them just wrap those element in a div element)

https://code.sololearn.com/WV4aC1a0NvbY/?ref=app

For info look here:
https://www.sololearn.com/learn/CSS/2253/

Also there is on this subject in the CSS lessons under the "Transitions & Transforms" section.

If this isn't the solution you wanted please post your code so me or someone else can look at it and attempt to apply the animation.

Answer 3

Use animate tag inside svg to animate opacity attribute values

<svg viewBox="0 0 200 200">
<circle id="c1" cx="100" cy="100" r="100" fill="red" opacity="0" />
<animate
xlink:href="#c1"
attributeName="opacity"
dur="10s"
form="0"
to="1"
repeatCount="1"
fill="freeze" />
</svg>

https://code.sololearn.com/WCfdpJxxGZMz/?ref=app
https://code.sololearn.com/WL9ngYpmQhtu/?ref=app

Answer 4

Calviղ But I want to know how to make a line to be drawn little by little

Answer 5

Calviղ Thanks you!