How to rotate svg circle

user_7460467 0
Viewed 271

I want to use the same svg, but instead want the half circle svg to be rotated 90 degrees. How do I do this? Thanks.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="grey" />
  <path d="M0,50 a1,1 0 0,0 100,0" fill="orange" />
</svg>

svg
2 Answers

SVG syntax

  • must not use units in the rotate() function
  • can state the rotation center only as part of the attribute

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="grey" />
  <path d="M0,50 a1,1 0 0,0 100,0" transform="rotate(90, 50 50)" fill="orange" />
</svg>

CSS syntax

  • must use units for rotate() function and transform origin
  • can state the rotation center only as CSS transform-origin

path {
    transform: rotate(90deg);
    transform-origin: 50px 50px;
}
<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="grey" />
  <path d="M0,50 a1,1 0 0,0 100,0" fill="orange" />
</svg>

user_49967790

To use the same SVG (which is what is desired and differentiates this answer from other answers) you can reference the original SVG from a <use> element in a new SVG and apply a CSS rotation.

.rotate90 {
  transform: rotate(90deg);
}
<svg id="mySVG" width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="grey" />
  <path d="M0,50 a1,1 0 0,0 100,0" fill="orange" />
</svg>

<svg class="rotate90" width="100" height="100">
  <use href="#mySVG"/>
</svg>

user_53517210
Related