Mengapa Menetapkan Asal Transformasi untuk Kumpulan SVG Tidak Berfungsi dalam Firefox?

Menetapkan transform asal untuk kumpulan SVG dalam Firefox tidak berfungsi

Menghadapi masalah menggunakan transform-origin dalam Firefox (versi 18, versi lain tidak diuji). Pelayar WebKit berfungsi seperti yang diharapkan. Saya telah cuba menetapkan asal kepada pusat kumpulan, tetapi tiada apa yang saya cuba setakat ini berjaya.

Berikut ialah kod:

#test {
  -webkit-transform-origin: 50% 50%;
  transform-origin: center center;
  -webkit-animation: prop 2s infinite;
  animation: prop 2s infinite;
}

@-webkit-keyframes prop {
  0% {
    -webkit-transform: scale(1, 1);
  }
  20% {
    -webkit-transform: scale(1, .8);
  }
  40% {
    -webkit-transform: scale(1, .6);
  }
  50% {
    -webkit-transform: scale(1, .4);
  }
  60% {
    -webkit-transform: scale(1, .2);
  }
  70% {
    -webkit-transform: scale(1, .4);
  }
  80% {
    -webkit-transform: scale(1, .6);
  }
  90% {
    -webkit-transform: scale(1, .8);
  }
  100% {
    -webkit-transform: scale(1, 1);
  }
}

@keyframes prop {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  20% {
    transform: matrix(1, 0, 0, .8, 0, 0);
  }
  40% {
    transform: matrix(1, 0, 0, .6, 0, 0);
  }
  50% {
    transform: matrix(1, 0, 0, .4, 0, 0);
  }
  60% {
    transform: matrix(1, 0, 0, .2, 0, 0);
  }
  70% {
    transform: matrix(1, 0, 0, .4, 0, 0);
  }
  80% {
    transform: matrix(1, 0, 0, .6, 0, 0);
  }
  90% {
    transform: matrix(1, 0, 0, .8, 0, 0);
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewbox="0 0 16 16">
    <g></g></svg>

Penyelesaian

Saya cuba memutarkan gear ringkas di sekeliling titik tengahnya menggunakan CSS mengubah grafik svg. Saya mengalami masalah yang sama seperti anda dalam Firefox nampaknya tidak mempunyai sebarang kesan.

Penyelesaian adalah dengan melukis bentuk svg asal supaya pusatnya berada pada koordinat 0, 0:

<svg x="0px" y="0px" width="400px" height="400px" viewbox="0 0 400 400">
    <rect></rect></svg>

Kemudian tambahkan kumpulan di sekelilingnya dan sorot ke tempat yang anda inginkan:

<svg x="0px" y="0px" width="400px" height="400px" viewbox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect></rect></g></svg>

Kini anda boleh menggunakan transformasi CSS yang sepatutnya berfungsi dalam Firefox Works (saya menggunakan JavaScript untuk menambah teg HTML berdasarkan tindakan pengguna Ingat untuk menambah kelas (js-rotateObject) dan gunakan Minimizr untuk menyemak sama ada penyemak imbas boleh mengendalikan transformasi dan transformasi (.csstransforms.csstransitions):

#myObject {
    transform: rotate(0deg);
    transition: all 1s linear;
}

.csstransforms.csstransitions.js-rotateObject #myObject {
    transform: rotate(360deg);
}

Semoga ia membantu.

Atas ialah kandungan terperinci Mengapa Menetapkan Asal Transformasi untuk Kumpulan SVG Tidak Berfungsi dalam Firefox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!