如何围绕另一个正在移动的元素的中心旋转 svg 元素？

Question

我不知道如何将一个 svg 元素的旋转中心设置为另一个正在移动的 svg 元素的中心。

我应该怎么做才能使元素“c2”（红色圆圈）的旋转中心成为圆“c1”（蓝色圆圈）的中心，这样通过改变“c1”的位置，“ c2" 会在 "c1" 内旋转（围绕 "c1" 的中心）？

<style>
    svg {
        background-color: yellow;
    }
    #c2 {
        transform-box: fill-box;
        transform-origin: 50% 0%;
    }
    
</style>
<svg height= "200" width = "300" >
        <circle id="c1" cx="150" cy="150" r="50"  fill="#025371">
            <animateTransform attributeName="transform" type="translate" from="0, 0" to="0, -100" dur="2s" begin="2s"/>
        </circle>

        <circle id="c2" cx="150" cy="175" r="25" fill="red">
            <animateTransform attributeName="transform" type="translate" from="0, 0" to="0, -50" dur="1s"/>
            <animateTransform attributeName="transform" type="rotate" from="0" to = "720" dur="4s" />
        </circle>
</svg>

Answer 1

将两个圆圈放在一个组中并为该组设置动画

svg {
        background-color: yellow;
    }
#c2 {
        transform-box: fill-box;
        transform-origin: 50% 0%;
    }

<svg height= "200" width = "300" >
        
<g>  
  <circle id="c1" cx="150" cy="150" r="50"  fill="#025371"></circle>
  <circle id="c2" cx="150" cy="175" r="25" fill="red">
            <animateTransform attributeName="transform" type="translate" from="0, 0" to="0, -50" dur="1s"/>
            <animateTransform attributeName="transform" type="rotate" from="0" to = "720" dur="4s" />
   </circle>
  
  <animateTransform attributeName="transform" type="translate" from="0, 0" to="0, -100" dur="2s" begin="2s"/>
  </g>
</svg>

如何围绕另一个正在移动的元素的中心旋转 svg 元素？

How to rotate svg element around the center of another element that is moving?

css

svg

svg-animate