Position donut chunks using SVG in React

Question

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?

in SVG you can do `transform="rotate(90 10 10)"` meaning that you rotate the element 90 degs around the point {x:10,y:10}. Also since you have the intention to reuse the shape you may give the shape an id and reuse it with [](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use) — enxaneta, Jan 18 '23 at 08:06
Some browsers (e.g. Firefox) still struggle with `calc()` applied to svg elements. You might use `pathLength` to facilitate the dash length calculations and `stroke-dashoffset` to place your segments. See also ["Pie chart using circle element"](https://stackoverflow.com/questions/70648538/pie-chart-using-circle-element/70659532) — herrstrietzel, Jan 18 '23 at 17:22

score 1 · Accepted Answer · answered Jan 18 '23 at 07:49

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>
);

Position donut chunks using SVG in React

1 Answers1