Mengapakah `transform-origin` tidak berfungsi pada Kumpulan SVG dalam Firefox?

Tetapan transform-origin pada kumpulan SVG dalam Firefox tidak berfungsi

Tidak boleh menjadikan transform-origin berkuat kuasa dalam Firefox (v. 18 , tidak diuji pada versi lain) adalah masalah biasa. Pelayar WebKit berfungsi seperti yang diharapkan. Anda telah cuba menetapkan asal untuk menjadi pusat kumpulan, tetapi semua percubaan setakat ini telah gagal.

Berikut ialah kod yang berkaitan:

#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

Masalahnya disebabkan oleh cara bentuk SVG dilukis. Untuk membolehkan Firefox menggunakan transform-origin dengan betul, bahagian tengah bentuk SVG asal mestilah pada koordinat 0, 0.

1. Lukis 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>

2. Tambah kumpulan di sekeliling bentuk asal dan terjemahkannya ke kedudukan yang diingini:

<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 peralihan CSS pada kumpulan dan ini sepatutnya berfungsi dengan baik dalam Firefox.

Atas ialah kandungan terperinci Mengapakah `transform-origin` tidak berfungsi pada Kumpulan SVG dalam Firefox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!