如果可以，请分享/帮助。
我想用CSS制作一个SVG动画。我有一个SVG；外部"；正方形和正方形里面的一个小圆。想象一个有一个点的骰子。现在我只想移动方框/正方形内的圆圈。我不知道也不知道怎么做。我可以移动整个SVG，但不能移动"；内部"；SVG。
这里是我的代码(外部ID标签有效，但我希望内部ID标签有效//我包含外部标签只是为了演示//删除它(：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#my-circle {
width: 300px;
height: 300px;
background-color: transparent;
position: relative;
animation-name: LtopRbottom;
animation-duration: 2s;
}
@keyframes LtopRbottom {
0% { left:0px; top:0px;}
100% { left:150px; top:150px;}
}
</style>
</head>
<body>
<svg width="300" height="300" style="border:1px solid black" xmlns="http://www.w3.org/2000/svg" id="my-circle">
<svg >
<rect x="10" y="10" width="280" height="280" ry="20" fill="#fff" stroke="#000" stroke-width="10"/>
</svg>
<svg id="my-circle">
<circle cx="150"cy="150" r="25" stroke="#0ff" fill="#f0f"/>
</svg>
</svg>
</body>
</html>您不需要将每个SVG元素嵌套在一个单独的SVG元素中。正如Robert所提到的，您有重复的ID，如果您想为圆的位置设置动画，请为其定位属性(cx和cy(设置动画。SVG子元素没有left或top属性。
#my-circle {
width: 300px;
height: 300px;
background-color: transparent;
position: relative;
animation-name: LtopRbottom;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes LtopRbottom {
0% { cx:0px; cy:0px;}
100% { cx:150px; cy:150px;}
}<svg width="300" height="300" style="border:1px solid black" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="280" height="280" ry="20" fill="#fff" stroke="#000" stroke-width="10"/>
<circle id="my-circle" cx="150"cy="150" r="25" stroke="#0ff" fill="#f0f"/>
</svg>