Mengapa Skala Sub-Elemen SVG Saya dari Kiri Atas Daripada Pusatnya?

Isu Asal Transformasi CSS pada Sub-Elemen SVG

Apabila cuba menskalakan sub-elemen dalam SVG, pengguna mungkin menghadapi ketidakkonsistenan dengan titik asal-ubah. Khususnya, asal ditetapkan kepada (0,0) berdasarkan SVG keseluruhan dan bukannya pusat sub-elemen. Tingkah laku ini menjadikan animasi kelihatan "terbang masuk" dari kiri atas dan bukannya berskala dari pusat elemen yang dikehendaki.

Untuk menyelesaikan isu ini dan menetapkan asal-ubah secara relatif kepada elemen tertentu yang dianimasikan, transformasi- harta kotak perlu disertakan. Dengan menetapkannya kepada "kotak isi", asal transformasi terikat pada dimensi sub-elemen:

<code class="css">#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}</code>

Pengubahsuaian ini memastikan sub-elemen, dalam kes ini, kotak animasi, berskala daripada pusatnya sendiri dan bukannya asal usul keseluruhan SVG.

Atas ialah kandungan terperinci Mengapa Skala Sub-Elemen SVG Saya dari Kiri Atas Daripada Pusatnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!