How can i move a whole svg ?

Question

I was trying to make a small game with html and css ,a bit of js
My game was related to spaceships and all.I created a spaceship by multiple rectangles within one svg and i want to move it in horizontal direction
I tried to do animate but when i applied it to all rectangles in that svg the shape of spaceship changed
Pls tell how to move the completw svg or tell a solution

Answer 1

Use <g> tag it is used to group various elements/shapes as one.
Hope it will work as you want.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

Answer 2

Put your all rectangles inside
<g></g>.
For animation you can use animate ,animateMotion,animateTransform
As per your animation required.
I don't know about what type of animation you are taking about.

Answer 3

See here I have done one for you
I have applied aninateTransform on id of g tag.
I have component like body cockpit wingr and wingl.

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

Hope it will be helpfull.
Not transfrmY due to some drawing complexation .but helpfull to solve your doubt .

Answer 4

Cant understand you
Do you mean that i should add g tag before rectangles but after svg and close it after all rectangles.Also tell that where should i apply the animate tag then

Answer 5

I was talking about<animate attributeName=x values="200;1000;200;" dur="3s" repeatCount="3">

Your code was working with your case
But it is not moving my spaceship.
I am working on VSCode.Maybe that makes a difference

Answer 6

Can you tell how made the path

Answer 7

I mean so accurate

Answer 8

Pls tell the solution of my question too

Answer 9

Html:
<svg id = "haha" height = "200px" width = "200px"></svg>

Css:
#haha {
background: blue;
position: absolute;
animation: anim 2 linear infinite;
}
@keyframes anim {
0%, 100% {left:10px;}
50% {left: 100px;}
}

Answer 10

My code is on computer
but ill try to type it but not now cause i am not in a mood
i will write till tomorrow
i hope its fine by your side

Answer 11

Also, Namit Jain i would like to ask what is @ used for and what the code ahead of @ .Also tell what is anim

Answer 12

Raghu Rao anim is just a name!
You can replace it by any other word

https://www.sololearn.com/learn/CSS/2253/
https://www.sololearn.com/learn/CSS/2254/

Answer 13

Thx pls tell about @ also

Answer 14

Raghu Rao pls refer to the links I have posted

Answer 15

The solution is: wrap the path into

<g transform="translate(offset_x,offset_y)"></g>

Answer 16

I use

https://www.drawsvg.org/drawsvg.html

This website to draw svg.

For your help I think I could better help you if you share your code.