Javascript svg元素的自底向上CSS动画

是否有一种纯CSS的方式来设置SVG rect元素的动画，使其从下至上，但从某一点开始，而不是从父元素的底部开始

例如，假设有一个

元素位于轴上，我希望它从轴向上展开：

rect{
填充物：浅绿色；
笔画：绿色；
笔画宽度：2；
动画：展开0.75秒轻松度；
/*变换原点：上下*/
变换原点：0.100%；
}
@关键帧展开{
从{
变换：scaleY（0）；
}
到{
变换：scaleY（1）；
}
}
线{
笔画：黑色；
笔画宽度：2；
填充：无；
}
正文{
字体：斜体20px衬线；
填充物：灰色；
}

轴

您可以将

translateY

添加到变换中，使用矩形高度的一半作为起始偏移量

rect{
填充物：浅绿色；
笔画：绿色；
笔画宽度：2；
动画：展开0.75秒轻松度；
/*变换原点：上下*/
变换原点：0.100%；
}
@关键帧展开{
从{
转换：translateY（-50px）scaleY（0）；
}
到{
变换：translateY（0px）scaleY（1）；
}
}
线{
笔画：黑色；
笔画宽度：2；
填充：无；
}
正文{
字体：斜体20px衬线；
填充物：灰色；
}

轴

变换框：填充框？@TemaniAfif谢谢！我不知道这房子。添加
变换框时：填充框
到
rect
样式，它从rect元素的底部开始动画无法使用
translateY（-50px）
，因为SVG的大小取决于其父级的大小，所以我不知道需要高级翻译多少。我必须使用JS/TS来确定这一点。谢谢：）@Liliane很高兴你解决了这个问题。只需注意for
转换框
。感谢您提供的信息。那些该死的和边缘>：(