Firefox: Draggable + SVG

[ShinyRobot]

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

[jamiejefferson]

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, ...);)

[ShinyRobot]

Yeah, it appears that the transform is not working in Firefox on any SVG element, only the container <div>, which is my current workaround.

 

It does look like the property 'rotate' does work though.

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

[jamiejefferson]

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

TweenLite.set("svg",{rotation:45});

 

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

[jamiejefferson]

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);

[GreenSock]

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

[ShinyRobot]

Great find Jamie, thanks!

[GreenSock]

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

 

Thanks gentlemen.