Jump to content


just for fun: nested svgs and rotation

Recommended Posts

Hi there,

i would like to have some reliable, understandable svg-nesting method, ready for dynamic x/y-shift and rotation.

I am trying to get some results, still without centerpoint manipulation (brain not ready yet, sorry).

I found out that its possible to shift groups very well with <svg> parents, and to rotate groups better with <g>parents.

If you play with the example, please try to start over and change order of manipulation. You will see, that centerpoint gets fixed at the moment of first-time object-rotation.

Since it deals with nested svgs, i hope my explanation sounds not too complicated.

See the Pen qvWGYQ by Frnzmtz (@Frnzmtz) on CodePen

Link to comment
Share on other sites

Sorry, but I don't understand what you are asking.



Thanks for the demo, but I don't understand what to do with it. What is rechteck3a? Am I supposed to look in the SVG code and try to decipher the rgb value? fill="rgba(250,250,50,0.70)


Perhaps you can try to explain 1 simple interaction, the result it gives and the desired result you would like.


I'm guessing your issue has more to do with how SVGs handle transform origin and nested elements and not necessarily something related to gsap.


I think that GSAP's smoothOrigin may help you. Please read section challenge: set transformOrigin without unsightly jumps at: https://greensock.com/svg-tips


  • Like 4
Link to comment
Share on other sites

Codepen html is a bit unorganized, sorry. I did a lot of flash, still thinking in nested timelines, and want to reproduce this structure with GSAP.

My main point is, that it was told impossible to have nested svgs with different rotation on elements/group but I found out that it is possible.


"However - If you end up nesting an SVG inside another one you will not be able to transform the nested root SVG element (for now)."

from here:

12th post from top


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.