如何使用「transform-Box: fill-box;」來修正 SVG 子元素中的意外動畫行為？

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

嘗試對SVG 中的子元素進行動畫處理時，該元素的變換原點通常是相對於整個SVG 設定的，而不是相對於正在動畫的特定子元素。這可能會導致意外的動畫行為，例如元素似乎從 SVG 的左上角而不是自己的中心開始縮放。

為了解決此問題，CSS 提供了 transform-b​​ox 屬性，該屬性可以用於定義將受變換影響的框。透過將transform-b​​ox設定為fill-box，變換將僅套用於元素的內容框（即元素可見內容佔據的區域）。

考慮下面的範例，其中一個矩形SVG 中的(id="animated-box") 使用CSS 動畫進行縮放：

@keyframes scaleBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

#animated-box {
  animation: scaleBox 2s infinite;
}

如果不設定Transform-b​​ox屬性，矩形將從SVG 的左上角開始縮放，如下所示它的變換原點設定為相對於整個SVG 的(0,0)。

要修正此行為並使矩形從其自身中心開始縮放，請新增transform-Box: fill-box;到#animated-box 選擇器：

@keyframes scaleBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}

現在，矩形將從自身中心開始縮放，因為Transform-b​​ox 屬性可確保轉換僅套用於元素的內容框。這可以更好地控制動畫，並實現更精確和更具視覺吸引力的結果。

以上是如何使用「transform-Box: fill-box;」來修正 SVG 子元素中的意外動畫行為？的詳細內容。更多資訊請關注PHP中文網其他相關文章！