transformer l'origine pour les animations CSS sur SVG de travail dans Chrome, pas de FF
Je suis en train de créer une animation simple à l'aide de CSS et SVG: une rotation de l'engrenage. L'animation fonctionne parfaitement sur Chrome mais pas avec Firefox. Voici le code en action: http://jsfiddle.net/fL8Qn/
La vitesse est un chemin d'accès dans un fichier 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>Et l'animation est appliquée à l'aide de 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;
}
}À l'aide de CSS est l'approche privilégiée parce que je suis à l'application de la classe de façon dynamique. (dans le sens antihoraire lorsque le défilement vers le bas, dans le sens horaire tout en défilant vers le haut), mais pour les fins de cette question, je suis tout simplement l'application de la seule classe. Chrome le rend bien, mais Firefox ne semble pas, pour reprendre les -moz-transform-origin de la propriété. Peu importe ce que j'utilise, firefox semble être d'appliquer la transformation à partir de l'origine (0,0) alors que Chrome ramasse sur la transformation de l'origine de propriété et fonctionne correctement.
J'ai essayé à peu près tout ce que j'ai pu trouver. Quelqu'un a des idées?
OriginalL'auteur Fingel | 2013-09-21
Vous devez vous connecter pour publier un commentaire.
J'ai un exemple:
http://jsfiddle.net/4h3xL/1/
Le problème avec cette réponse est que le
x=""ety=""attributs ne fonctionnent pas sur tous les éléments svg, dans votre cas, ils sont valables sur le texte élément, mais pas le chemin.Ma réponse implique css
transform: translate(). Ces valeurs (avec la lignepathattributtransform="translate()") réinitialisés lorsque vous essayez d'exécuter une animation sur le même élément, l'animation est aussi une transformation -transform: rotate(). J'ai essayé pour la chaîne de la traduire sur la rotation, mais cette bizarrement n'a pas de travail dans FF.J'ai enveloppé le chemin de deux
g'. Le chemin d'accès et le groupe externe sont utilisés pour compenser/réinitialisation de l'alignement, et le milieu de l'animation.pas le temps de créer une démo pour l'instant, mais vous devriez essayer de traduire(-50% -50%)
hey, mis à jour mon jsfiddle lien, réalisé qu'il n'avait pas enregistré correctement
Ce n'! Encore assez alambiqué à mon avis, mais pour être juste, svg et css animation semblent assez edge. Merci!!!!
ouais, alambiqué est droit. j'ai essayé beaucoup d'autres options, mais en fin de compte le supplément g tag a tous qui ont travaillé. le pire, c'est que vous ne pouvez pas utiliser des pourcentages sur les traduire en svg, ne peut donc pas être sensible.
OriginalL'auteur daviestar
Me semble que si Firefox a un "problème" avec l'attribution de la CSS animation de la
<path>élément à l'intérieur de la<svg>.Si la mise à jour de votre jsFiddle et simplement déplacé l'attribut de classe de
<path>à<svg>. Alors qu'il fonctionne comme prévu (sauf que le texte tourne aussi).Alternativement, vous pouvez utiliser
<animateTransform>dans votre fichier SVG.Voir DÉMO
OriginalL'auteur Netsurfer