為什麼「transform-origin」在 Firefox 中的 SVG 群組上無法正常運作？

解決Firefox 的SVG 組中的變換原點問題

問題陳述

在SVG 組上設定變原組Firefox 中似乎沒有任何效果。雖然這在 Webkit 瀏覽器中按預期工作，但在 Firefox 中使用時，轉換原點無法正確對齊。

程式碼範例

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

解

為了解決這個問題，建議以座標為中心繪製原始SVG形狀(0, 0)。這涉及到移動形狀的原點以與預期的變換原點正確對齊。

修訂的SVG

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

透過將形狀的中心放置在( 0, 0)，現在可以正確應用變換原點，從而在Firefox 中實現所需的變換行為。

以上是為什麼「transform-origin」在 Firefox 中的 SVG 群組上無法正常運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！