xml - Rotating SVG CSS Animation in Firefox Not Working, and Need SVG Fallbacks -

i'm trying animate these gears, , works intended in chrome. however, in firefox rotation origin different, , can't figure out how fix this.

i've tried playing width, height, viewbox, , x & y attributes, nothing seems work perfectly.

based on svg rotate path example.

and finally, best practice providing proper fallbacks svg paths in other/older browsers not support graphic/animation?

the rest of code here: jsfiddle here (html + svg code long paste)

css:

#gear-head {   position: fixed;   background: #172235;   width: auto;   height: 100%; } #gear-head .gear {   -webkit-animation: rotation 6s infinite linear;   -moz-animation: rotation 6s infinite linear;   -o-animation: rotation 6s infinite linear;   animation: rotation 6s infinite linear;   transform-origin: 50% 50%;   -webkit-transform-origin: 50% 50%;   -moz-transform-origin: 50% 50%; } @-webkit-keyframes rotation {   {     -webkit-transform: rotate(0deg);   }   {     -webkit-transform: rotate(359deg);   } } @-moz-keyframes rotation {   {     -moz-transform: rotate(0deg);   }   {     -moz-transform: rotate(359deg);   } } @-o-keyframes rotation {   {     -o-transform: rotate(0deg);   }   {     -o-transform: rotate(359deg);   } } @keyframes rotation {   {     transform: rotate(0deg);   }   {     transform: rotate(359deg);   } } #gear-head .pulsating {   -webkit-animation: pulsate 6s ease-out;   -webkit-animation-iteration-count: infinite;   opacity: 0.5;   transform-origin: 50% 50%;   -webkit-transform-origin: 50% 50%;   -moz-transform-origin: 50% 50%; } @-webkit-keyframes pulsate {   0% {     -webkit-transform: scale(0.5, 0.5);     opacity: 0.0;   }   50% {     opacity: 1.0;   }   100% {     -webkit-transform: scale(1.2, 1.2);     opacity: 0.0;   } } 

the simple solution use half-height , half-width units:

instead of transform-origin: 50% 50%;

get width , height of svg (ex: width="234px" height="186px"); divide both values 2 (to 117px , 93px, respectively); use

transform-origin: 117px 93px;

this should work on browsers (i tested on safari, chrome, , firefox)