Mengapa Kumpulan SVG `transform-origin` Tidak Berfungsi seperti yang Dijangkakan dalam Firefox dan Bagaimana Saya Boleh Membetulkannya?

Isu Transform-Origin Kumpulan SVG dalam Firefox: Satu Resolusi

Pengguna Firefox mungkin menghadapi kesukaran menggunakan transform-origin pada kumpulan SVG. Walaupun percubaan untuk memusatkan asal, transformasi yang diingini masih sukar difahami. Masalah ini berpunca daripada gaya lukisan SVG yang unik dalam Firefox.

Untuk menyelesaikan isu ini, lukis bentuk SVG dengan pusatnya pada asal (0, 0):

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <rect>

Seterusnya, sertakan bentuk dalam kumpulan dan terjemahkannya ke kedudukan yang diingini:

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

Kini, peralihan CSS boleh digunakan pada kumpulan ini, termasuk transform-origin, dan harus berfungsi dengan betul dalam Firefox:

#myObject {
    transform: rotate(0deg);
    transition: all 1s linear;
}

.csstransforms.csstransitions.js-rotateObject #myObject {
    transform: rotate(360deg);
}

Atas ialah kandungan terperinci Mengapa Kumpulan SVG `transform-origin` Tidak Berfungsi seperti yang Dijangkakan dalam Firefox dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!