Position donut chunks using SVG in React-CodePudding

I have this SVG in react

const Donut = () => {
    return (
        <div className='rounded p-20' > 
        <svg height="30em" width="30em" viewBox="0 0 20 20">
        <circle r="10" cx="10" cy="10" fill="white" />
        <circle r="5" cx="10" cy="10" fill="bisque"
                stroke="tomato"
                stroke-width="10"
                stroke-dasharray="calc(12.5 * 31.42 / 100) 31.42" 
                transform="rotate(-90) translate(-20)"
                />
        <circle r="5" cx="10" cy="10" fill="none"
                stroke="green"
                stroke-width="10"
                stroke-dasharray="calc(12.5 * 31.42 / 100) 31.42" 
                transform="rotate(90) translate(-20)"
                />
        <circle r="5" cx="10" cy="10" fill="white" />
        </svg>
    </div>
    )
}

I'd like to rotate the second green "Donut section" to 90, 180 and 270 degrees. Any changes I make to the rotate or the translate mean the green section disappears.

How can I position 12.5 % chunks on a donut using svg?

Is it possible to add text to each chunk?

CodePudding user response：

You can use the transform-origin to set where the transformation start. And then you only need to rotate it like this:

const Donut = () => (
    <div className="rounded p-20">
      <svg height="30em" width="30em" viewBox="0 0 20 20">
        <circle r="10" cx="10" cy="10" fill="white" />
        <circle
          r="5"
          cx="10"
          cy="10"
          fill="bisque"
          stroke="tomato"
          stroke-width="10"
          stroke-dasharray="calc(12.5 * 31.42 / 100) 31.42"
          transform-origin="10 10"
          transform="rotate(-90)"
        />
        <circle
          r="5"
          cx="10"
          cy="10"
          fill="none"
          stroke="green"
          stroke-width="10"
          stroke-dasharray="calc(12.5 * 31.42 / 100) 31.42"
        />
        <circle
          r="5"
          cx="10"
          cy="10"
          fill="none"
          stroke="green"
          stroke-width="10"
          stroke-dasharray="calc(12.5 * 31.42 / 100) 31.42"
          transform-origin="10 10"
          transform="rotate(90)"
        />
        <circle
          r="5"
          cx="10"
          cy="10"
          fill="none"
          stroke="green"
          stroke-width="10"
          stroke-dasharray="calc(12.5 * 31.42 / 100) 31.42"
          transform-origin="10 10"
          transform="rotate(180)"
        />
        <circle r="5" cx="10" cy="10" fill="white" />
      </svg>
    </div>
);