為什麼我的 SVG 子元素動畫從錯誤的原點開始？

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

使用 SVG 時，控制子元素的變換原點可能具有挑戰性元素。預設情況下，CSS 動畫和轉換使用整個 SVG 的 (0,0) 原點，而不是正在動畫的特定元素的中心。

理解問題

中在提供的範例中，目的是從中心縮放子元素「animated-box」。然而，動畫從 SVG 的 (0,0) 原點開始，給人一種盒子「從左上角飛進來」的錯覺。

解決方案：變換盒子

要設定相對於動畫元素的變換原點，我們可以使用「transform-b​​ox」屬性：

<code class="css">transform-box: fill-box;</code>

「fill-box」值告訴瀏覽器使用子元素的邊界框（它填滿的區域）作為變換原點。這確保動畫按照預期從“animated-box”中心縮放。

更新的範例

將transform-b​​ox屬性應用到我們的範例：

<code class="css">@keyframes scaleBox {
  from {transform: scale(0);}
  to {transform: scale(1);}
}
#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}</code>

<code class="html"><svg ...>
  ...
  <rect id="animated-box" ...>
  ...
</svg></code>

現在，「

現在，「動畫框」從其中心縮放，創造出更平滑、更準確的動畫。

以上是為什麼我的 SVG 子元素動畫從錯誤的原點開始？的詳細內容。更多資訊請關注PHP中文網其他相關文章！