css缩放SVG移动元素

我正在尝试制作一个svg动画，正如演示所示，当我缩放svg的电荷填充时，它被推到了容器的左边缘

是否可以在svg中保留路径的x、y属性？还是svg无法正确设置动画

.svg{
宽度：40%；
}
#冲锋{
/*动画：充电1秒轻松无限*/
变换：scaleX（0.1）；
}
@关键帧电荷{
0% {
变换：scaleX（0.1）；
}
100% {
变换：比例（1）；
}
}

---

您可以设置

宽度的动画，以达到所需的效果：


.svg{
宽度：40%；
}
#冲锋{
宽度：10px；
高度：80px；
动画：充电1秒轻松无限；
}
@关键帧电荷{
0% {
宽度：0；
}
100% {
宽度：180px；
}
}

您可以使用该属性更改变换元素的位置。默认值是50%，50%，使您的转换开始在元素的中间。


.svg{
宽度：40%；
}
#冲锋{
变换原点：10px；
动画：充电1秒轻松无限；
变换：scaleX（0.1）；
}
@关键帧电荷{
0% {
变换：scaleX（0.1）；
}
100% {
变换：比例（1）；
}
}
为了避免在
变换原点上设置像素值
，您还可以调整
变换框
，使变换原点相对于元素而不是整个SVG：


.svg{
宽度：40%；
}
#冲锋{
变换原点：左；
变换框：填充框；
动画：充电1秒轻松无限；
变换：scaleX（0.1）；
}
@关键帧电荷{
0% {
变换：scaleX（0.1）；
}
100% {
变换：比例（1）；
}
}