為什麼我的 SVG 子元素從左上角而不是中心開始縮放？

SVG 子元素上的CSS 轉換原點問題

嘗試縮放SVG 中的子元素時，使用者可能會遇到與變換原點。具體來說，原點根據整個 SVG 而不是子元素的中心設定為 (0,0)。此行為使動畫看起來是從左上角“飛入”，而不是從所需元素的中心縮放。

要解決此問題並設定相對於要進行動畫處理的特定元素的變換原點，需要使用 Transform-需要包含 box 屬性。透過將其設為“fill-box”，變換原點將綁定到子元素的尺寸：

<code class="css">#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}</code>

此修改可確保子元素（在本例中為動畫框）縮放從它自己的中心開始，而不是整個SVG 的起源。

以上是為什麼我的 SVG 子元素從左上角而不是中心開始縮放？的詳細內容。更多資訊請關注PHP中文網其他相關文章！