Mengapa `transform-origin` Tidak Berfungsi pada Kumpulan SVG dalam Firefox, dan Bagaimana Saya Boleh Membetulkannya?

Transform-Origin pada Kumpulan SVG: Penyelesaian Khusus Firefox

Dalam Firefox, menetapkan asal-ubah pada kumpulan SVG telah dilakukan secara berterusan isu, menyebabkan pembangun bingung mengapa ia kelihatan tidak berfungsi. Untuk menangani masalah ini, mari kita mendalami penyelesaian yang telah terbukti berkesan.

Untuk menggambarkan isu ini, pertimbangkan kod SVG berikut:

<svg>
  <g>

Firefox akan mengabaikan sifat asal transformasi, bermakna transformasi kumpulan tidak akan berlaku di sekitar pusat yang dimaksudkan.

Kunci untuk menyelesaikan masalah ini terletak pada mengubah suai Reka bentuk SVG. Daripada melukis bentuk dalam kumpulan, ia harus dibuat sedemikian rupa sehingga pusatnya sejajar dengan asal koordinat (0, 0). Contohnya:

<svg>
  <rect>

Dalam senario ini, pusat segi empat tepat sejajar dengan asalan koordinat. Selepas itu, anda boleh menggunakan CSS untuk mencipta peralihan dan animasi yang Firefox akan laksanakan dengan betul di sekitar pusat kumpulan.

Sebagai contoh, coretan CSS berikut akan memutarkan kumpulan (dan segi empat tepat) di sekeliling pusatnya dalam Firefox:

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

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

Penyelesaian ini secara berkesan menyelesaikan isu asal-ubah dalam Firefox, membolehkan transformasi lancar berpusat di sekitar SVG kumpulan.

Atas ialah kandungan terperinci Mengapa `transform-origin` Tidak Berfungsi pada Kumpulan SVG dalam Firefox, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!