CSS transform Scale 平移对象，如何避免？

Question

我想将一个对象作为动画进行缩放，我希望它保持在原位并且只是增长，但是在对此进行编程时，整个图形都会增长，即使我只是将代码应用于此示例中的圆圈： 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);}
}

它是一个矩形 SVG，里面有一个圆圈，当我扩大圆圈时，它会改变它的位置，我希望它留在原来的位置。

感谢您的帮助！

Answer 1

您只需要将原点应用到比例尺，它默认为左上角，听起来您可能想要它在中间

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

CSS transform Scale 平移对象，如何避免？

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

css

svg

transform

scale