Mengapakah Animasi Sub-elemen SVG Saya Bermula Dari Asal Yang Salah?

Isu Asal Transformasi CSS pada Sub-Elemen SVG

Apabila bekerja dengan SVG, adalah sukar untuk mengawal asal transformasi sub- elemen. Secara lalai, animasi dan transformasi CSS menggunakan keseluruhan asal usul SVG (0,0), bukan pusat elemen khusus yang dianimasikan.

Memahami Isu

Dalam contoh yang diberikan, niatnya adalah untuk menskalakan sub-elemen "kotak animasi" dari pusatnya. Walau bagaimanapun, animasi bermula dari asal SVG (0,0), memberikan ilusi bahawa kotak itu "terbang masuk dari kiri atas."

Penyelesaian: Transform Box

Untuk menetapkan asal ubah secara relatif kepada elemen animasi, kita boleh menggunakan sifat "transform-box":

<code class="css">transform-box: fill-box;</code>

Nilai "fill-box" memberitahu penyemak imbas untuk menggunakan sub-elemen kotak sempadan (kawasan yang diisinya) sebagai asal transformasi. Ini memastikan animasi berskala dari tengah "kotak animasi" seperti yang dimaksudkan.

Contoh Kemas Kini

Menggunakan sifat transform-box pada contoh kami:

<code class="css">@keyframes scaleBox {
  from {transform: scale(0);}
  to {transform: scale(1);}
}
#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}</code>

<code class="html"><svg ...>
  ...
  <rect id="animated-box" ...>
  ...
</svg></code>

Kini, "kotak animasi" berskala dari tengahnya, mencipta animasi yang lebih lancar dan tepat.

Atas ialah kandungan terperinci Mengapakah Animasi Sub-elemen SVG Saya Bermula Dari Asal Yang Salah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!