CODEWITHSUNDEEP
csssvgsvg-animate
kims9
kims9

Reputation: 55

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

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>

Upvotes: 3

Views: 339

Answers (1)

enxaneta
enxaneta

Reputation: 33064

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>

Upvotes: 2

Related Questions