Jump to content
Search Community

SVG apply transform attribute with Draggable

chriswyl test
Moderator Tag

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

  • Solution

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.
×
×
  • Create New...