Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
chriswyl

SVG apply transform attribute with Draggable

Recommended Posts

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

Link to comment
Share on other sites

Hi chriswyl  :)

 

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

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

Hopefully that helps a bit.

 

Happy dragging.

:)

  • Like 2
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

 

 

 

 

 

  • Like 4
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×