Setting transform-origin on SVG group not working in Firefox

by

I was attempting to rotate a simple cog svg graphic around its centre point using a CSS transition. I had the same problem as you with Firefox; transform-origin seemed to have no effect.

The solution was to draw the original svg shape so that its centre was at coordinate 0, 0:

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</svg>

Then add a group around it and translate to the position you want:

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
    </g>
</svg>

Now you can apply css transitions that should work in Firefox (I add a class to the HTML tag using JavaScript based on a user action (js-rotateObject) and use Minimizr to check that the browser can handle transforms and transitions (.csstransforms.csstransitions):

#myObject{
    transform: rotate(0deg);
    transition: all 1s linear;
}

.csstransforms.csstransitions.js-rotateObject #myObject{
    transform: rotate(360deg);
}

Hope that helps.

More Related Contents:

  1. Fill SVG path element with a background-image
  2. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  3. How to modify the fill color of an SVG image when being served as background image?
  4. SVG drop shadow using css3
  5. How to remove the arrow from a select element in Firefox
  6. SVGs not scaling properly in IE – has extra space
  7. border curved css – circle with curved end
  8. Circular percent progress bar
  9. Using base tag on a page that contains SVG marker elements fails to render marker
  10. Remove outline from select box in FF
  11. Div 100% height works on Firefox but not in IE
  12. How to calculate required hue-rotate to generate specific colour?
  13. How to change SVG color when it is an encoded CSS background image?
  14. How to rotate and postion an element on the top left or top right corner?
  15. CSS transform origin issue on svg sub-element
  16. Manipulating external svg file style properties with CSS
  17. 5 images symmetrically seperated with diagonal lines
  18. Css hover sometimes doesn’t work on svg paths
  19. transition for background-image in firefox?
  20. How do I create a teardrop in HTML?
  21. Create a Reverse Clip-Path – CSS or SVG
  22. Style a checkbox in firefox — remove check and border
  23. :before && :after pseudo elements not showing Firefox
  24. Internet Explorer and clip-path
  25. “break-inside: avoid-column” doesn’t work in Firefox
  26. svg background image position is always centered in internet explorer, despite background-position: left center;
  27. Is it possible to change the order of list items using CSS3?
  28. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  29. 2 colors in one placeholder of input field
  30. Flex elements ignore percent padding in Firefox

Leave a Comment