gsap.set-ing an SVG property doesn't move it

[Lark 6 Likes (Newbie)]

Sandbox URL (it's with React):
https://codesandbox.io/s/floral-feather-o4du95?file=/src/Box.tsx:642-648

 

I would like to control a draggable via SVG, like in the example.

I create an svg (instead of a g, because I want to easily position children elements relative to it), then I instantiate the draggable in a single-time useEffect, to work on the group but be triggered by the rect.

Add a new box by clicking anywhere on the blue part. A box is created and should be placed in the clicked part by calling gsap.set, but it doesn't.

I added a console.log during dragging so that you can see that the draggable IS moving, but not the element.

How do I solve this?

[Lark 6 Likes (Newbie)]

I figured out that this only works with g that has an initial transform: translate${x}, ${y}). An svg breaks for some reason, and I wonder why.

[GreenSock 18,877 Likes (Superhero)]

I'm confused - it seems to be working fine: 

https://codesandbox.io/s/blissful-black-7xufib?file=/src/Box.tsx

 

What am I missing? 

 

You definitely don't need to wrap things in a <g> or add a transform: translate(...) initially.