7
CSSとSVGを使用して簡単なアニメーションを作成しようとしています。アニメーションはFirefoxではなくChromeで完全に機能します。ここでは、アクションのコードは次のとおりです。http://jsfiddle.net/fL8Qn/クロムで動作するSVGのCSSアニメーションのトランスフォームオリジン
ギアは、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>
とアニメーションはCSSを使用して適用されます。
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;
}
}
私はクラスを動的に適用しているので、好ましいアプローチです。 （スクロールするときは時計回りに反時計回り、スクロールするときは時計回り）が、この質問の目的のために私はちょうど1つのクラスを適用しています。 Chromeはそれをうまくレンダリングしますが、Firefoxは-moz-transform-originプロパティでピックアップしないようです。私が何を使用していても、firefoxは変換元の（0,0）の変換を適用しているようですが、Chromeは変換元のプロパティを取得して正しく動作します。
私は見つけたものすべてを試しました。誰にでもアイデアはありますか？
私もこの答えを見つけましたが、問題を解決するためにどのように使用できるかわかりません。フィドルでは、要素の周りにを追加して、その修正を試してみることができます。 Iveはピクセル値も試しました。私が何を試しても、パスは常にその周りを回転します（0,0）。あなたは何をしなければならないのかの実例を持っていますか？ –
Fingel
今すぐデモを作成する時間はありませんが、翻訳を試す必要があります（-50％-50％） – daviestar
ちょっと、私のjsfiddleリンクを更新して、正しく保存されていないことを認識しました – daviestar