SVG apply transform attribute with Draggable

[chriswyl 3 Likes (Newbie)]

Hi,
 
I've svg text element with attribute.
 
<text .......  x="200" y="100" transform="rotate(30 200 100)" ......

 

Everything looks ok until create Draggable.

Draggable ignore rotation.

 

Maybe is there simply way to conver to matrix property?

 

Example shows two identical elements. One is Draggable.

 

See the Pen eZWmJj by amonk (@amonk) on CodePen

[PointC 8,599 Likes (Superhero)]

Hi chriswyl 

 

If you let GreenSock set() that rotation, everything works correctly.

TweenMax.set("#mytext", {rotation:30})

Hopefully that helps a bit.

 

Happy dragging.

[chriswyl 3 Likes (Newbie)]

Yes, text rotated, BUT the positions x,y are wrong. I tried add 

transformOrigin:"50% 50%" , looks better but not the same

[Diaco 1,948 Likes (Superhero)]

Hi chriswyl 

 

pls use svgOrgin instead of transformOrigin , like this : 

TweenMax.set("#mytext", {rotation:30,svgOrigin:"200 100"})
Draggable.create("#mytext", {type:"x,y"});

and if you have bunch of rotated elements , something like this little function can help you : 

 

function svgInlineRotated(svgElem){
  var t = svgElem.getAttribute("transform") ,
  v = t.split('(')[1].split(')')[0].split(' ') 
  TweenMax.set(svgElem, {rotation:v[0],svgOrigin:v[1]+' '+v[2]})
};

svgInlineRotated(document.getElementById("mytext"))

//TweenMax.set("#mytext", {rotation:30,svgOrigin:"200 100"})

Draggable.create("#mytext", {type:"x,y"});

 

pls check this out : 

See the Pen RaVPEB by MAW (@MAW) on CodePen

 

 

 

 

 

[GreenSock 8,117 Likes (Superhero)]

Also, I'd strongly recommend NOT using the /latest/ directory on the CDN because the CDN host refuses to support it now (not our choice - they just dropped support for it despite us asking many times that they keep it updated). So just link to a specific version, like 1.18.2. We've made several improvements to Draggable and GSAP since that version you were linking to, so definitely use 1.18.2 at least.