CODEWITHSUNDEEP
htmlcsssvg
Viaoer43
Viaoer43

Reputation: 63

How to center and rotate SVG circle correctly and center polygon in the center of the circle?

I'm trying to let the circles inside rotate. Using 50% in the from and to of the animateTransform didn't work.

The other thing I'm trying is to put the polygon in the center of the circle.

body {
  margin: 0;
  background: black;
}

#container {
  background: rgba(0, 155, 255, 0.3);
  padding: 10px;
}

#circle1 {
  
}

#circle2 {
  stroke-dasharray: 20 3 55;
}

#circle3 {
  stroke-dasharray: 22;
}
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" height=207px width=207px stroke="#00bd80" fill="none">
   <circle id="circle1" r="100" cx="50%" cy="50%" stroke-width="7px"/>
   
   <circle id="circle2" r="96" cx="50%" cy="50%" stroke-width="5px">
      <animateTransform attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="0 98.5 98.5"
                    to="360 98.5 98.5"
                    dur="20s"
                    repeatCount="indefinite"/> <!-- how to center correctly -->
   </circle>
   
   <circle id="circle3" r="80" cx="50%" cy="50%" stroke-width="5px"/>
   <polygon points="30,15 22.5,28.0 7.5,28.0 0,15 7.5,2.0 22.5,2.0"></polygon>
</svg>
</div>

Upvotes: 3

Views: 117

Answers (1)

Robert Longson
Robert Longson

Reputation: 124324

  1. Your canvas is 207px wide and 207px high. The circles are centred at 50% so at 207/2 = 103.5px so that's where you need to do your rotation around.

  2. The polygon is 30px wide and 26px across so you can just translate that into place too. You could combine the two polygon translate commands, I've left them separate so it's clearer what I've done.

console.log(document.getElementsByTagName("polygon")[0].getBBox())
body {
  margin: 0;
  background: black;
}

#container {
  background: rgba(0, 155, 255, 0.3);
  padding: 10px;
}

#circle1 {
  
}

#circle2 {
  stroke-dasharray: 20 3 55;
}

#circle3 {
  stroke-dasharray: 22;
}
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" height=207px width=207px stroke="#00bd80" fill="none">
   <circle id="circle1" r="100" cx="50%" cy="50%" stroke-width="7px"/>
   
   <circle id="circle2" r="96" cx="50%" cy="50%" stroke-width="5px">
      <animateTransform attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="0 103.5 103.5"
                    to="360 103.5 103.5"
                    dur="20s"
                    repeatCount="indefinite"/> <!-- how to center correctly -->
   </circle>
   
   <circle id="circle3" r="80" cx="50%" cy="50%" stroke-width="5px"/>
   <polygon transform="translate(103.5, 103.5) translate(-15, -13)" points="30,15 22.5,28.0 7.5,28.0 0,15 7.5,2.0 22.5,2.0"></polygon>
</svg>
</div>

Upvotes: 3

Related Questions