Html 如何在SVG中为正方形内的圆设置动画（为嵌套SVG设置动画）？

如果可以，请分享/帮助

我想用CSS制作一个SVG动画。我有一个SVG，它包括一个“外部”正方形和该正方形内部的一个小圆圈。想象一个有一个点的骰子。 现在我只想移动方框/正方形内的圆。我不知道，也找不到怎么做。我可以移动整个SVG，但不能移动“内部”SVG

这里是我的代码（外部ID标记可以工作，但我希望内部ID标记可以工作//我确实包含了外部标记，只是为了演示//删除它）：

文件
#我的圈子{
宽度：300px；
高度：300px；
背景色：透明；
位置：相对位置；
动画名称：LTOPRBOONT；
动画持续时间：2秒；
}
@底部的关键帧{
0%{左：0px；顶：0px；}
100%{左：150px；顶：150px；}
}

您不需要将每个SVG元素嵌套在单独的SVG元素中。正如Robert提到的，您有重复的ID，如果您想为圆的位置设置动画，请为其定位属性（cx和cy）设置动画。SVG子元素没有left或top属性

#我的圈子{
宽度：300px；
高度：300px；
背景色：透明；
位置：相对位置；
动画名称：LTOPRBOONT；
动画持续时间：2秒；
动画填充模式：正向；
}
@底部的关键帧{
0%{cx:0px；cy:0px；}
100%{cx:150px；cy:150px；}
}

您有两个id值相同的元素。这是无效的。我知道，我确实说过这只是为了显示我的问题：。（外部ID标记有效，但我希望内部ID标记有效//我确实包含了外部标记，只是为了演示//删除它）我如何在最后释放动画？圆应保持在端点处。找到此Ansare添加：动画：LTOPRBOONT 1.0s向前；在id“类”中，使用动画填充模式：向前。（我建议您阅读一些关于SVG和CSS动画的教程-我希望您不介意我注意到，在处理DOM动画之前，您应该真正了解这些内容）