為什麼縮放 SVG 子元素會使其“從左上角飛入”以及如何修復它？

SVG 子元素上的CSS 轉換來源問題

問題：

嘗試時要🎜>問題：

嘗試時要縮放SVG 中的子元素，變換原點設定為整個SVG 的(0,0) 點，導致子元素在動畫時看起來「從左上角飛入」。

解決方案：

要設定相對於正在動畫的特定子元素的變換原點，請加入以下CSS 規則：

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

此確保變換相對於子元素的邊界框，允許其從中心縮放。

更新的範例：

<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 id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
        width: 195px;
    ">
    <defs>
    <style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}
</style>
    </defs>
    <rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
    <path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
    <rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect>
</svg></code>

說明：

以上是為什麼縮放 SVG 子元素會使其“從左上角飛入”以及如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！