CODEWITHSUNDEEP
csssvgtransformscale
Phil Rv
Phil Rv

Reputation: 75

CSS transform Scale translates the object, how to avoid this?

I want to scale an object as an animation, I want it to stay in position and just grow, but when programming this, the whole drawing grows, even though I just applied the code to the circle in this example: http://codepen.io/Filipo/pen/JYVvXK

<svg>
<g transform="translate(0 -662.36)">
<circle id="dedo" r="35" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;fill-rule:evenodd;shape-rendering:auto;solid-color:#000000;image-rendering:auto;fill:#fff" cx="147.62" cy="741.74"/>
</g>
</svg>

body {background-color: black;}
#dedo{
animation: deslizando 2s ease-in-out infinite;
}

@keyframes deslizando {
0% {opacity: 1;}
100% {transform: scale(1.1,1.1);}
}

It's a rectangular SVG with a circle inside of it, when I grow the circle, it changes it's location, I want it to stay in it's original location.

Thanks for the help!

Upvotes: 0

Views: 236

Answers (1)

Matt Styles
Matt Styles

Reputation: 2452

You just need to apply an origin to the scale, it defaults to the top-left, sounds like you probably want it in the middle

#dedo{
  animation: deslizando 2s ease-in-out infinite;
  transform-origin: 50% 50%;
}

Upvotes: 1

Related Questions