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

问题描述

我不知道如何将一个 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,-50" dur="1s"/>
            <animateTransform attributeName="transform" type="rotate" from="0" to = "720" dur="4s" />
        </circle>
</svg>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

svg svg-animate