svg 子元素上的 CSS 变换原点问题

Question

I'm having issues with the transform-origin while attempting to scale sub-elements.

While attempting to scale animate a box within a larger svg, it uses the transform origin (0,0) from the overall svg, rather than the center of the element I am trying to scale.

This makes it appear like it is "flying in from the top left" which is not what I am looking for. I am looking to make it scale from the elements center.

How do I get the transform-origin to be set relative to the specific element I am animating, without having to hardcode the (x,y) position of the sub-element itself.

Here is a simple example of the issue I'm dealing

 @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

You need transform-box: fill-box;

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