為什麼「transform-origin」在 Firefox 中的 SVG 群組上不起作用，如何修復它？

SVG 組上的Transform-Origin：Firefox 特定解決方案

在Firefox 中，在SVG 組上設定Transform-Origin 是一體項持久的操作問題，讓開發人員感到困惑，為什麼它看起來不起作用。為了解決這個問題，讓我們深入研究一個已被證明有效的解決方案。

為了說明這個問題，請考慮以下 SVG 代碼：

<svg>
  <g>

Firefox 將忽略 transform-origin 屬性，這意味著該組的變換不會發生在其預期中心周圍。

解決此問題的關鍵在於修改 SVG 設計。不應在群組內繪製形狀，而應以使其中心與座標原點 (0, 0) 對齊的方式建立形狀。例如：

<svg>
  <rect>

在這種情況下，矩形的中心與座標原點對齊。隨後，您可以使用 CSS 建立過渡和動畫，Firefox 將圍繞群組的中心正確執行這些過渡和動畫。

例如，以下CSS 片段將在Firefox 中圍繞其中心旋轉組（和矩形）：

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

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

該解決方案有效解決了Firefox 中的變換源問題，允許以SVG組為中心進行無縫變換。

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