Question 245464 in Html Question posted in
Some basic documentation can be found here.

Html – Rotating an SVG Circle 90 degrees with a CSS transform?

Without the transform (style="transform: rotate(90deg)") this SVG element renders fine.

    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="200"
      height="200"
      viewBox="0 0 200  200"
    >
      <circle
        cx="100"
        cy="100"
        r="90"
        stroke="red"
        stroke-width="20"
        stroke-dasharray="565.4866776461628"
        stroke-dashoffset="441.079608564007"
        stroke-linecap="round"
      ></circle>
    </svg>

However if I put the transform in the element disappears.

       <svg
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="200"
          height="200"
          viewBox="0 0 200  200"
        >
          <circle
            cx="100"
            cy="100"
            r="90"
            stroke="red"
            stroke-width="20"
            stroke-dasharray="565.4866776461628"
            stroke-dashoffset="441.079608564007"
            stroke-linecap="round"
            style="transform: rotate(90deg)"
          ></circle>
        </svg>

Any ideas on how to fix this?

Tags:

2

Answers


  1. 0

    Set the transform-origin to center

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200  200">
          <circle
            cx="100"
            cy="100"
            r="90"
            stroke="red"
            stroke-width="20"
            stroke-dasharray="565.4866776461628"
            stroke-dashoffset="441.079608564007"
            stroke-linecap="round"
            style="transform: rotate(90deg); transform-origin: center;"
          ></circle>
        </svg>
    Login or Signup to reply.
  2. 0 
    <svg
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="200"
          height="200"
          viewBox="0 0 200  200"
          style="transform: rotate(90deg)"
        >
          <circle
            cx="100"
            cy="100"
            r="90"
            stroke="red"
            stroke-width="20"
            stroke-dasharray="565.4866776461628"
            stroke-dashoffset="441.079608564007"
            stroke-linecap="round"
          ></circle>
        </svg>

    The crazy part is, I think what you did worked, just not like you expected it to.

    Since you applied the transform on the circle, it rotated the circle around its origin pixel in the upper left corner. So rotating clockwise 90 degrees actually rotated it out of the view (around that upper left corner). If you were to shift the view to the left far enough, you would be able to see the circle start to come back into the view.

    I’m presuming you just wanted to spin the end result of the drawn circle. This would mean that you should just spin the parent element containing the circle, which would be the svg. Feel free to play around with the degrees to get what you’re looking for, but again if you just want to see the red part rotate spin the svg and not the circle!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search