+ 2
How do i make a aeroplane using svg cause i wanna animate it
17 Answers
+ 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...
+ 26
I draw out a lot of designs on graph paper (10px per line) then use multiple SVG polygon points. Best of Luck.๐
+ 9
ya and u can use CSS to animate
+ 8
it is better to use div tag for different parts and animate it with CSS
+ 8
first insert an image and
use the keyframes like I have done to change position
+ 7
Led 10 Dada can u answer my question on multiphase animation
+ 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.
+ 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.
+ 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???
+ 5
Glad you decided to do this... Hats of๐ฉ
+ 3
so you mean just add an image and put animate tag below it and animate it
+ 3
sai you may have seen my code on moving box so can i replace the rectangle with an airplane using an img tag?
+ 3
thanks a lot@Led10 deda
+ 3
sai did u make it
+ 2
can i just upload a svg image ,if yes then how
+ 2
no thanks first ill complete my css course then ill give it a try myself thanks a lot man