Jump to content


Firefox: Draggable + SVG

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

Here's an odd one.  Rotation for SVG elements doesn't seem to work in Firefox.  Does anyone know if there's a workaround?


See the Pen mjxtC by Mode7James (@Mode7James) on CodePen

Link to comment
Share on other sites

Sure I can see that. You'll have to wait for an answer from the master himself though.

Here's are a really reduced example that doesn't bother with all that D3 stuff:

See the Pen idwoq?editors=101 by jamiejefferson (@jamiejefferson) on CodePen


(note: if you just target an HTML wrapper element for the SVG, you can rotate that right? i.e. Draggable.create(_pieId, ...);)

Link to comment
Share on other sites

Well GSAP can certainly modify the rotation of an SVG element - try



It's likely just a small bug in the way Firefox reports sizes/coordinates that breaks Draggable's mouse or element coordinates.

  • Like 1
Link to comment
Share on other sites

Jack, I tracked it down to lines 275, 276, 299 and 300 of Draggable. SVG's and their children don't have an offsetLeft/offsetTop in Firefox (29 - didn't check other versions), so those are undefined and breaking tx/ty in the 2d matrix.
This got it working for me, although I'm not sure if the behaviour will be correct without the offsets...
275:  m[4] = Number(m[4]) + offsetOrigin.x + (e.offsetLeft || 0) ...
276:  m[5] = Number(m[5]) + offsetOrigin.y + (e.offsetTop || 0) ...

299:  m[4] -= (parent.offsetLeft || 0);
300:  m[5] -= (parent.offsetTop || 0);

  • Like 5
Link to comment
Share on other sites

Thanks Jamie. You rock, man. I'll drop that edit into the next push. 

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

This should be fixed in the latest version of Draggable/GSAP. 


Thanks gentlemen. 

  • Like 1
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.