dönüşüm kaynağı, değil FF

Question

CSS ve SVG kullanarak basit bir animasyon oluşturmaya çalışıyorum: dönen bir dişli. Animasyon, Chrome'da mükemmel bir şekilde çalışıyor ancak Firefox'ta çalışmıyor. http://jsfiddle.net/fL8Qn/

dişli bir SVG dosyasında bir yol olduğunu: Burada eylem kodudur

<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> 

Ve animasyon CSS kullanılarak uygulanır:

.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; 
    } 
} 

kullanma CSS tercih edilen yaklaşımdır çünkü sınıfı dinamik olarak uyguluyorum. (aşağı doğru kaydırırken saat yönünün tersine, saat yönünün tersine kaydırılırken), ancak bu sorunun amaçları için sadece bir sınıfı uyguluyorum. Chrome onu iyi işliyor, ancak Firefox, -moz-transform-origin özelliğinden yararlanmıyor gibi görünüyor. Ne kullandığımın bir önemi yok, firefox (0,0) 'dan bir kökene dönüşümü uygularken, Chrome dönüşüm-esaslı mülkiyeti alır ve doğru çalışır.

Bulduğum her şeyi denedim. Herhangi bir fikri olan var mı?

Answer 1

DEMO Bkz Ben çalışan bir örnek vardır:

http://jsfiddle.net/4h3xL/1/

this answer sorun x="" ve y="" nitelikleri sizin durumunuzda olduklarını, tüm svg elemanları üzerinde çalışmak kalmamasıdıröğesinde geçerlidir, ancak path öğesinde geçerli değildir.

Cevabım css transform: translate() içeriyor. Aynı değer üzerinde bir animasyon çalıştırmayı denediğinizde, bu değerler (path özniteliği ile birlikte) sıfırlanır ve animasyon aynı zamanda bir dönüşümdür - transform: rotate(). Tercümeyi rotasyona zincirlemeyi denedim, fakat bu garip bir şekilde FF'de çalışmadı.

Yolu iki g adlı yere yapıştırdım. Yol ve dış grup, ofset/sıfırlama hizalaması için ve animasyon için orta olanı için kullanılır.

Answer 2

Firefox, <svg>'un içindeki <path> öğesine CSS animasyonu atamada bir "sorun" içeriyormuş gibi görünüyor.

jsFiddle numaralı telefonunuzu güncelleştirdiyseniz ve <path> numaralı sınıf özniteliğini <svg> ürününe aktardıysanız. Sonra beklendiği gibi çalışır (artık metin de döner).

Alternatif olarak, SVG dosyanızda <animateTransform> kullanabilirsiniz.