Skip to content

Instantly share code, notes, and snippets.

@brunnolou
Created August 31, 2015 13:31
Show Gist options
  • Save brunnolou/cab8c0a481ea78ff50dc to your computer and use it in GitHub Desktop.
Save brunnolou/cab8c0a481ea78ff50dc to your computer and use it in GitHub Desktop.
Calculate SVG absolute `transform-origin` position to be compatible with firefox
var element = document.querySelector(prompt('Insert the querySelector to the svg element.', '#gear'));
var bbox = element.getBBox(),
x = bbox.x,
y = bbox.y,
w = bbox.width,
h = bbox.height
;
var result =
'center center' + "\n" +
(x + (w / 2)) + 'px ' +
(y + (h / 2)) + 'px;' +
"\n" +
"\n" +
'top left' + "\n" +
x + 'px ' +
y + 'px;' +
"\n" +
"\n" +
'top right' + "\n" +
(x + w) + 'px ' +
y + 'px;' +
"\n" +
"\n" +
'bottom right' + "\n" +
(x + w) + 'px ' +
(y + h) + 'px;' +
"\n" +
"\n" +
'bottom left' + "\n" +
x + 'px ' +
(y + h) + 'px;' +
"\n"
;
alert(result);
@brunnolou
Copy link
Author

To use this:

  • Open the SVG in the browser
  • Create a bookmarklet or run this code on the console
  • Put the querySelector to the SVG element
  • Copy the value and paste in your css transform-origin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment