為什麼 SVG 群組「transform-origin」在 Firefox 中沒有如預期運作，如何修復它？

Firefox 中的SVG 群組變換來源問題：解決方案

Firefox 使用者在SVG 群組上使用變換來源時可能會遇到困難。儘管嘗試將原點置於中心，所需的轉變仍然難以實現。此問題源自於 Firefox 中獨特的 SVG 繪製風格。

要解決此問題，請以原點(0, 0) 為中心繪製SVG 形狀：

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

下一步，將形狀括在一個群組中並將其翻譯到所需要的位置：

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

現在，CSS 過渡可以應用於該組，包括轉換原點，並且應該在Firefox中正常運作：

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

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

以上是為什麼 SVG 群組「transform-origin」在 Firefox 中沒有如預期運作，如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！