Html svg css动画会改变位置和大小，我只想让它改变大小

我想让svg中的一个元素变得越来越大，越来越小，以便制作一个动画

我添加了一个简化的svg来演示我遇到的问题

现在的情况是，盒子越来越大（好），但它也从顶部向下移动（坏），我希望它保持在原位

我希望正方形的中心保持不变，同时它在Y方向上变大

路径{
动画：shine-1 1s无限线性；
}
@关键帧shine-1{
从{
变换：scaleY（0）；
}
到{
变换：scaleY（1）；
}
}

您可以制作一个div并将svg插入其中，这样它就不会下降而变得更大。如下所示

#方格{
动画：shine-1 1s无限线性；
}
@关键帧shine-1{
从{
变换：scaleY（0）；
}
到{
变换：scaleY（1）；
}
}

您可以制作一个div并将svg插入其中，这样它就不会下降而变得更大。如下所示

#方格{
动画：shine-1 1s无限线性；
}
@关键帧shine-1{
从{
变换：scaleY（0）；
}
到{
变换：scaleY（1）；
}
}

我需要的是动画后的变换原点属性和变换框属性。 它需要将其变换原点设置在中心，以50%为50% 它还非常需要设置变换框来填充框

然后，所有动画都是相对于它们所在的位置

.class{
        animation: spin-grow-ect 3s infinite linear;
        transform-origin: 50% 50%;
        transform-box: fill-box;
    }

---

我需要的是动画后的“变换原点”属性和“变换框”属性。 它需要将其变换原点设置在中心，以50%为50% 它还非常需要设置变换框来填充框

然后，所有动画都是相对于它们所在的位置

.class{
        animation: spin-grow-ect 3s infinite linear;
        transform-origin: 50% 50%;
        transform-box: fill-box;
    }

---

这对我不起作用，不幸的是，我在这个svg中使用了几个元素，我试图让一组元素增长和收缩。这对我不起作用，不幸的是，我在这个svg中使用了几个元素，我试图让一组元素增长和收缩。