SVG transform using transform-box: fill-box

[nico fonseca]

Hey folks!
I'm having a problem with SVG transform properties using transform-box: fill-box

Is possible to avoid the matrix calculation in the rect ? 
I created a Codepen example with three rects, the red use only css, the blue use a normal tween and the yellow one is crazy 😂

Thanks! 💚

See the Pen 7736216fe12763d374b202a9120295a2 by nicofonseca (@nicofonseca) on CodePen

[OSUblake]

GSAP wasn't designed to work with CSS origins for SVG because at the time they didn't work the same in every browser. So GSAP came up with a solution that would work the same in every browser, which is why you have to manually set it. Notice how it removes the origin from the style so it doesn't interfere.

<rect style="transform-origin: 0px 0px;"></rect>

 

If you really need to do that, you could put a transform attribute on the element...

<rect class="gsap-2" width="100" height="100" x="500" y="100" fill="yellow" transform="rotate(0)" />

 

And then animate the attribute.

gsap.to(".gsap-2", {
  attr: {
    transform: "rotate(360)"
  }
})

 

[GreenSock]

Yep, Blake is exactly right. I'd strongly recommend setting all your transforms via GSAP. I wouldn't do that attribute animation. Going through GSAP for all your transforms will get you better performance, accuracy, plus it'll automatically work around various browser bugs (best compatibility). 

[nico fonseca]

Thanks @GreenSock and @OSUblake for your explanation. 🙏
I will consider those things. 

[Cassie]

Also, no need for transformBox because we have svgOrigin!

See the Pen waKrNj by GreenSock (@GreenSock) on CodePen

transformBox: fill-box is the same as using transformOrigin to set the reference for transforms

and

transformBox: view-box is like using svgOrigin to set the reference for transforms

(also, thanks for your help in the forums recently Nico! 🏆)

[nico fonseca]

That's nice @Cassie  and i didn't know the svgOrigin property.

Thanks to all of you for letting me contribute. 🙏

I learned a lot of things on these weeks.

💚
 

[PointC]

4 hours ago, nicofonseca said:

Thanks to all of you for letting me contribute. 🙏

I learned a lot of things on these weeks.

It's great to see you jumping in so much lately @nicofonseca. Great work. 🙌

 

Just be careful. If you hang around too much, you may get addicted to the forum and won't be able to leave. I tried to leave once, but Jack duct-taped me to the wall. 

[GreenSock]

Indeed, you've been a great addition to these forums, @nicofonseca. I hope you'll stick around and continue the good work. If not, I may have to whip out the handy-dandy duct tape.

 

[nico fonseca]

@PointC  hahaha,  I'll be careful  👀 but this is getting addictive. 😂

 

@GreenSock thanks 🙏, I'll stick around to give back everything Greensock gave me these years 💚