Mengapakah `transform-origin` Tidak Berfungsi dengan Betul pada Kumpulan SVG dalam Firefox?

Menyelesaikan Isu transform-origin dalam Kumpulan SVG untuk Firefox

Pernyataan Masalah

Menetapkan transform-origin pada kumpulan SVG nampaknya tidak mempunyai sebarang kesan dalam Firefox. Walaupun ini berfungsi seperti yang dimaksudkan dalam penyemak imbas Webkit, transform-origin tidak sejajar dengan betul apabila digunakan dalam Firefox.

Contoh Kod

#test {
  -webkit-transform-origin: 50% 50%;
  transform-origin: center center;
 ...
}

Penyelesaian

Untuk menangani isu ini, adalah disyorkan untuk melukis bentuk SVG asal dengan pusatnya pada koordinat (0, 0). Ini melibatkan peralihan asal bentuk untuk diselaraskan dengan betul dengan asal-ubah yang dijangkakan.

SVG yang disemak

<svg x="0px" y="0px" width="400px" height="400px" viewbox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect></rect></g></svg>

Dengan meletakkan bahagian tengah bentuk pada ( 0, 0), asal transformasi kini boleh digunakan dengan betul, menghasilkan tingkah laku transformasi yang diingini dalam Firefox.

Atas ialah kandungan terperinci Mengapakah `transform-origin` Tidak Berfungsi dengan Betul pada Kumpulan SVG dalam Firefox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!