How to rotate svg circle

Question

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>

Answer 1

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>