以下是一些適合您文章內容的基於問題的標題： * 為什麼我的 SVG 子元素從左上角開始縮放？ * 縮放 SVG 子時如何修正變換原點問題

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

縮放SVG 中的子元素時，預設變換原點設定為整個SVG 的設定為整個SVG 的( 0,0) 點，即左上角。如果所需的原點是正在縮放的元素的中心，這可能會導致意外的縮放行為。

要解決此問題，請修改要設定動畫的元素的 Transform-Box 屬性。預設情況下，transform-b​​ox 使用 border-box 模型，其中變換操作是相對於元素的框（包括其填充和邊框）應用的。若要解決原點問題，請設定transform-Box: fill-box;。

範例：

<code class="css">@keyframes scaleBox {
  from {transform: scale(0);}
  to {transform: scale(1);}
}

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

將transform-b​​ox設定為fill-box，變換操作將相對於元素的實際內容而不是其框來應用。這將確保縮放動畫源自子元素的中心。

以上是以下是一些適合您文章內容的基於問題的標題： * 為什麼我的 SVG 子元素從左上角開始縮放？ * 縮放 SVG 子時如何修正變換原點問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！