Bagaimana untuk Membetulkan Gelagat Animasi Tidak Dijangka dalam Sub-Elemen SVG dengan `transform-box: fill-box;`?

Isu asal-ubah CSS pada Sub-Elemen SVG

Apabila cuba menghidupkan sub-elemen dalam SVG, asal-usul transformasi elemen selalunya ditetapkan secara relatif kepada keseluruhan SVG dan bukannya sub-elemen tertentu yang dianimasikan. Ini boleh mengakibatkan tingkah laku animasi yang tidak dijangka, seperti elemen kelihatan berskala dari penjuru kiri sebelah atas SVG dan bukannya pusatnya sendiri.

Untuk menangani isu ini, CSS menyediakan sifat transform-box yang boleh digunakan untuk menentukan kotak yang akan dipengaruhi oleh penjelmaan. Dengan menetapkan kotak-transformasi kepada kotak-isi, transformasi akan digunakan hanya pada kotak kandungan elemen (iaitu, kawasan yang diduduki oleh kandungan kelihatan elemen).

Pertimbangkan contoh di bawah, di mana segi empat tepat (id="animated-box") dalam SVG diskalakan menggunakan animasi CSS:

@keyframes scaleBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

#animated-box {
  animation: scaleBox 2s infinite;
}

Tanpa menetapkan sifat transform-box, segi empat tepat akan berskala dari sudut kiri atas SVG, sebagai asal ubahnya ditetapkan kepada (0,0) berbanding keseluruhan SVG.

Untuk membetulkan gelagat ini dan mempunyai skala segi empat tepat dari pusatnya sendiri, tambahkan kotak transformasi: kotak isi; kepada pemilih #kotak-animasi:

@keyframes scaleBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}

Kini, segi empat tepat akan berskala dari pusatnya sendiri, kerana sifat kotak-transformasi memastikan bahawa penjelmaan digunakan hanya pada kotak kandungan elemen. Ini memberikan kawalan yang lebih besar ke atas animasi dan membolehkan hasil yang lebih tepat dan menarik secara visual.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Gelagat Animasi Tidak Dijangka dalam Sub-Elemen SVG dengan `transform-box: fill-box;`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!