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>