How do i make a aeroplane using svg cause i wanna animate it | Sololearn: Learn to code for FREE!
Novo curso! Todo programador deveria aprender IA generativa!
Experimente uma aula grƔtis
+ 2

How do i make a aeroplane using svg cause i wanna animate it

17th Aug 2018, 2:31 PM
Code master
17 Respostas
+ 6
Yuvraj Animate tag is just for SVG elements, not for every element. In order to animate an image, you have to use CSS keyframes or JavaScript...
17th Aug 2018, 3:14 PM
Ledio Deda
Ledio Deda - avatar
+ 26
I draw out a lot of designs on graph paper (10px per line) then use multiple SVG polygon points. Best of Luck.šŸ™‚
17th Aug 2018, 2:54 PM
bobbie
bobbie - avatar
+ 9
ya and u can use CSS to animate
17th Aug 2018, 3:16 PM
SK Sai
SK Sai - avatar
+ 8
it is better to use div tag for different parts and animate it with CSS
17th Aug 2018, 3:12 PM
SK Sai
SK Sai - avatar
+ 8
first insert an image and use the keyframes like I have done to change position
17th Aug 2018, 3:30 PM
SK Sai
SK Sai - avatar
+ 7
Led 10 Dada can u answer my question on multiphase animation
17th Aug 2018, 3:47 PM
SK Sai
SK Sai - avatar
+ 6
SVG is not about images. In SVG you can use paths to create awesome graphics(lines, curves, arcs...). This is done by adding the coordinates of each point. That's why bobbie said you may need a graph paper. If you want to upload an image you can just use <img src="img_url" alt=""> and then animate it.
17th Aug 2018, 3:09 PM
Ledio Deda
Ledio Deda - avatar
+ 5
Yuvraj U r welcomed! I saw your code and you can not use <animate> tag for images. In this case you should: 1. Use <path></path> to draw an airplane 2. Add <img src=...> and use CSS keyframes to change its position.
17th Aug 2018, 3:25 PM
Ledio Deda
Ledio Deda - avatar
+ 5
Add an image with id="a" and: #a { position: absolute; top: 0; animation: fly 5s infinite; } @keyframes fly{ 0% {top: 5%; left:50%;} 40% {top: 20%; left:80%;} 80% {top: 50%; left:60%;} 100%{top: 90%; left:10%;} } You are free to change the positions(top or left) and add some more stages(not only 0, 40, 80, 100%). Do you need an explaination how it works???
17th Aug 2018, 3:33 PM
Ledio Deda
Ledio Deda - avatar
+ 5
Glad you decided to do this... Hats ofšŸŽ©
17th Aug 2018, 3:44 PM
Ledio Deda
Ledio Deda - avatar
+ 3
so you mean just add an image and put animate tag below it and animate it
17th Aug 2018, 3:10 PM
Code master
+ 3
sai you may have seen my code on moving box so can i replace the rectangle with an airplane using an img tag?
17th Aug 2018, 3:14 PM
Code master
+ 3
thanks a lot@Led10 deda
17th Aug 2018, 3:16 PM
Code master
+ 3
sai did u make it
17th Aug 2018, 3:29 PM
Code master
+ 2
can i just upload a svg image ,if yes then how
17th Aug 2018, 3:01 PM
Code master
+ 2
no thanks first ill complete my css course then ill give it a try myself thanks a lot man
17th Aug 2018, 3:42 PM
Code master