CSS转换Scale转换对象，如何避免这种情况？

Question

我希望将对象缩放为动画，我希望它保持原位并且只是增长，但是在编程时，整个绘图都会增长，即使我在此示例中仅将代码应用于圆圈：{{ 3}}

<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%;
}