just for fun: nested svgs and rotation

[Frnzmtz]

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

[Carl]

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

 

[Frnzmtz]

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