How can i move a whole svg ? | SoloLearn: Learn to code for FREE!

+1

How can i move a whole svg ?

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

8/13/2020 7:24:24 AM

Raghu Rao

16 Answers

New Answer

+5

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

+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.

+2

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 .

+1

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

+1

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

0

Can you tell how made the path

0

I mean so accurate

0

Pls tell the solution of my question too

0

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;} }

0

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

0

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

0

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/

0

Thx pls tell about @ also

0

Raghu Rao pls refer to the links I have posted

0

The solution is: wrap the path into <g transform="translate(offset_x,offset_y)"></g>

-1

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.