How to retain a svg path inside a container while rotating

[shy_seagull]

Hi!

I have this SVG path that should be fitted into its frame when it’s being resized.

That is working fine when I use 

preserveAspectRatio="none"

but now my question is if I can also rotate the path using MouseY and still contain its boundaries to that of it’s parent. The Path should never overflow it’s parent container, if that makes sense.

 

The problem is I also want to morph the path at the same time using MouseX so I can’t rotate the path element itself but rather the group that is surrounding.

See the Pen vYVZNXd by lkssmnt-the-lessful (@lkssmnt-the-lessful) on CodePen

[Cassie]

Hi there,

 

There's certainly no easy way to approach something like this - preserveAspectRatio isn't aware of transforms. Does it have to be scaled up to fit the longest side of the viewport or could you make it smaller so it's longest side is never longer than the shortest viewport length?

[shy_seagull]

Thank you Cassie,

 

that’s good to know, so I can find an alternative solution to transforming!