css - 如何围绕另一个正在移动的元素的中心旋转 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>