fix: clipping behavior of children with transform

[jozsefsallai]

This PR updates the logic that's used to define the clipping of children relative to their parent element so that they render correctly when the parent has overflow: hidden and the child has a transform property. The new logic does the following:

• if the current rect has a transform property, do not add a clip-path and a mask to the shape/image element, as that will be handled outside this element
  • images require special treatment, since these changes interfere with how the border radius is rendered for them, so we're defining a clip path for the border radius alone, which will be used on the image
• if the current rect has a transform property, add a wrapper group element around the generated shape, which will have the original clip path and mask defined
  • also include the definition for the border radius clip path if it's an image
• the functions used to build the content mask and the overflow will also include a transform attribute if the overflow is hidden and there is a transform definition

Also added unit tests for the behavior. All the previously defined tests pass. To my knowledge and based on my manual tests, these changes don't break existing behavior.

Before:

The magenta rects shouldn't overflow their parents.

After:

The clipping behavior is correct when the child has a transformation. This works even if the parent itself has a transformation.

Playground example: https://og-playground.vercel.app/?share=5VTBTsMwDP2VyKdNKlrZNJAi4MYPII69pIvbhmVJlKTrpqr_TrKIrR3jCBd6qe1nJ37vSelhozkChScu9oUixPmjxOe-jzEhXDgj2ZGSAiqJhwKyWB-GQr3E4GvoeuynwfgZ7YQXWkWIlU7L1uMI9tpQsszPucTKTwqd4L6hZJVfSg2Kugldq_WlVrLNtra6VTxe1DVicoveo62k7iLWCM5RncFIjpATvTHB7xRvrnJ7met1qnbTOMFGCwXililXabuLDW6L3WyZc6znCZDM4-wxN4csaGEO88loqS1H-8a4aN1Eq8SFkEVyaxHYhOhPnVuPxPlt626JeJdU_Ef2pj9koE10ywHt4UQF6H0euECiAPQhJhzLtgbqbYsZ4E5_iPejiQ-C705ZOKfSyr_uSuSpbcjAszJ0NCiDD9pKDsMn

Fixes #481

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
satori-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 17, 2024 11:32pm

[shuding]

Great work, thanks!

[github-actions]

🎉 This PR is included in version 0.11.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀