Mengapakah penskalaan sub-elemen SVG menjadikannya \'terbang dari kiri atas\' dan cara membetulkannya?

Isu asal transformasi CSS pada Sub-Elemen SVG

Masalah:

Apabila mencuba untuk menskala sub-elemen dalam SVG, asal-ubah ditetapkan kepada titik (0,0) SVG keseluruhan, membawa kepada sub-elemen kelihatan "terbang dari kiri atas" apabila dianimasikan.

Penyelesaian:

Untuk menetapkan transform-origin relatif kepada sub-elemen tertentu yang dianimasikan, tambah peraturan CSS berikut:

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

Ini memastikan bahawa penjelmaan adalah relatif kepada kotak sempadan sub-elemen, membolehkan ia berskala dari pusatnya.

Contoh Kemas Kini:

<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 id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
        width: 195px;
    ">
    <defs>
    <style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}
</style>
    </defs>
    <rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
    <path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
    <rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect>
</svg></code>

Penjelasan:

Sifat kotak-transformasi menentukan bahagian elemen mana yang digunakan untuk mengira asalan transformasi. Dengan menetapkannya kepada kotak isi, asal dikira menggunakan kotak sempadan subelemen dan bukannya ruang koordinat SVG induk.

Atas ialah kandungan terperinci Mengapakah penskalaan sub-elemen SVG menjadikannya \'terbang dari kiri atas\' dan cara membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!