svg 子元素上的 CSS 變換原點問題

Question

我在嘗試縮放子元素時遇到了轉換原點的問題。

在嘗試在更大的 svg 中縮放動畫框時，它使用來自整個 svg 的變換原點 (0,0)，而不是我嘗試縮放的元素的中心。

這使它看起來像是“從左上角飛入”，這不是我想要的。 我希望讓它從元素中心縮放。

如何相對於我正在設置動畫的特定元素設置變換原點，而不必硬編碼子元素本身的 (x,y) 位置。

這是我正在處理的問題的一個簡單示例

 @keyframes scaleBox { from {transform: scale(0);} to {transform: scale(1);} } #animated-box { animation: scaleBox 2s infinite; }

 <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>

Answer 1

你需要變換框：填充框；

 @keyframes scaleBox { from {transform: scale(0);} to {transform: scale(1);} } #animated-box { transform-box: fill-box; animation: scaleBox 2s infinite; }

 <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>