Why does scaling an SVG sub-element make it \"fly in from the top left\" and how to fix it?

CSS transform-origin Issue on SVG Sub-Elements

Problem:

When attempting to scale a sub-element within an SVG, the transform-origin is set to the (0,0) point of the overall SVG, leading to the sub-element appearing to "fly in from the top left" when animated.

Solution:

To set the transform-origin relative to the specific sub-element being animated, add the following CSS rule:

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

This ensures that the transformation is relative to the bounding box of the sub-element, allowing it to scale from its center.

Updated Example:

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

Explanation:

The transform-box property determines which portion of an element is used to calculate the transform origin. By setting it to fill-box, the origin is calculated using the sub-element's bounding box instead of the coordinate space of the parent SVG.

The above is the detailed content of Why does scaling an SVG sub-element make it \"fly in from the top left\" and how to fix it?. For more information, please follow other related articles on the PHP Chinese website!