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

Question

I dont know how to set up a rotating center of an svg element to be a center of another svg element that is moving.

What should i do so that the rotate center of the element "c2" (red circle) would be center of the circle "c1" (blue circle), so that by changing the position of "c1", "c2" would rotate inside "c1" (around the center of "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>

score 2 · Accepted Answer · answered Apr 22 '21 at 13:47

Put both circles in a group and animate the group

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>

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

1 Answers1