origen de transformación para la animación CSS en SVG que trabaja en Chrome, no FF
Estoy tratando de crear una animación simple usando CSS y SVG: un engranaje giratorio. La animación funciona perfectamente en Chrome pero no en Firefox. Aquí está el código en acción:http://jsfiddle.net/fL8Qn/
El engranaje es un camino en un archivo SVG:
<div class="svg">
<svg x="0px" y="0px" width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<title>PDP</title>
<text x="44" y="120" class="gear_text">PDP</text>
<g transform="translate(50%, 50%)">
<path id="gear1" class="gear go-clockwise" x="0px" y="0px" d="m91.63252,0l-4.16735,23.73752l0.01604,0.01606c-5.09374,0.83228 -10.02215,2.16622 -14.72963,3.9428l0,-0.01584l-15.46727,-18.48038l-14.53742,8.39871l8.25439,22.63163l0.03211,0.01585c-3.9412,3.23531 -7.55353,6.86028 -10.78684,10.8031l-0.01604,-0.04816l-22.63164,-8.25463l-8.39871,14.53743l18.48035,15.48333c-1.77354,4.70347 -3.09585,9.62447 -3.92695,14.71362l-0.01604,-0.01586l-23.73753,4.16734l0,16.79736l23.73753,4.16735l0.01604,-0.01587c0.83109,5.08915 2.15341,10.01014 3.92695,14.71381l-18.48035,15.48312l8.39871,14.53743l22.63164,-8.25444l0.01604,-0.04832c3.23331,3.94261 6.84564,7.56799 10.78684,10.80287l-0.03211,0.0159l-8.25439,22.63168l14.53742,8.39873l15.46727,-18.48027l0,-0.01582c4.70748,1.77637 9.63589,3.11047 14.72963,3.94278l-0.01604,0.01587l4.16735,23.73772l16.78132,0l4.16733,-23.73772l-0.01603,-0.01587c5.09294,-0.83009 10.02274,-2.15297 14.72985,-3.92696l15.4831,18.48047l14.53743,-8.39871l-8.27046,-22.63173c3.93234,-3.22687 7.54289,-6.83942 10.771,-10.7708l22.64757,8.25439l8.38263,-14.53741l-18.4642,-15.48308c1.77402,-4.70432 3.11153,-9.62388 3.94283,-14.71384l23.73775,-4.15126l0,-16.79738l-23.73775,-4.16735c-0.83148,-5.08432 -2.17067,-9.99828 -3.94283,-14.69775l18.4642,-15.4831l-8.38263,-14.53745l-22.64757,8.25443c-3.2281,-3.93136 -6.83842,-7.54391 -10.771,-10.77079l8.27046,-22.63168l-14.53743,-8.39871l-15.4831,18.48042c-4.70711,-1.77378 -9.63691,-3.09688 -14.72985,-3.92696l0.01603,-0.01586l-4.16733,-23.73761l-16.78132,0l0,-0.00011l0,0zm8.39869,40.8716c32.67677,0 59.17564,26.48283 59.17564,59.1596c0,32.67677 -26.49887,59.15962 -59.17564,59.15962c-32.67677,0 -59.15962,-26.48285 -59.15962,-59.15962c0,-32.67677 26.48286,-59.1596 59.15962,-59.1596z" stroke-dashoffset="0" stroke-miterlimit="4" stroke-linejoin="round" stroke-linecap="round" stroke-width="2"/>
</g>
</svg>
Y la animación se aplica utilizando CSS:
.svg {
width:200px;
height:200px;
float:left;
position: fixed;
top: 20px;
left: 50px;
}
.go-clockwise {
-webkit-animation: clockwise 3s infinite linear;
-moz-animation: clockwise 3s infinite linear;
}
.go-counter-clockwise {
-webkit-animation: counter-clockwise 3s infinite linear;
-moz-animation: counter-clockwise 3s infinite linear;
}
path.gear{
fill: #3f3f3f;
}
text.gear_text{
font-size: 55px;
font-weight: 900;
fill: #3f3f3f;
}
@-webkit-keyframes clockwise {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
transform-origin: center center;
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
transform-origin: center center;
}
}
@-moz-keyframes clockwise {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
transform-origin: center center;
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
transform-origin: center center;
}
}
@-webkit-keyframes counter-clockwise {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
transform-origin: center center;
}
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
transform-origin: center center;
}
}
@-moz-keyframes counter-clockwise {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
transform-origin: center center;
}
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
transform-origin: center center;
}
}
Usar CSS es el enfoque preferido porque estoy aplicando la clase dinámicamente. (en sentido contrario a las agujas del reloj cuando se desplaza hacia abajo, hacia la derecha mientras se desplaza hacia arriba), pero para los fines de esta pregunta, solo aplico la clase Chrome lo hace bien, pero Firefox no parece captar en el-moz-transform-origin propiedad. No importa lo que use, Firefox parece estar aplicando la transformación de un origen de (0,0), mientras que Chrome recoge la propiedad de origen de transformación y funciona correctamente.
He intentado casi todo lo que pude encontrar. ¿Alguien tiene alguna idea?