Блог

 import React from "react";
import { PieChart, Pie, Label } from "recharts";

const data = [
  { name: "Group A", value: 400 },
  { name: "Group B", value: 300 },
  { name: "Group C", value: 300 },
  { name: "Group D", value: 200 },
  { name: "Group E", value: 278 },
  { name: "Group F", value: 189 }
];

const icon = () => (
  <svg xmlns="http://www.w3.org/2000/svg"  x={200}
  y={210}>
    {Array(5)
      .fill("")
      .map((_, i: any) => (
        <g key={i} fill="red">
          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
        </g>
      ))}
  </svg>
);

export default function App() {
  return (
    <PieChart width={1000} height={400}>
      <Pie
        dataKey="value"
        isAnimationActive={false}
        data={data}
        cx={200}
        cy={200}
        innerRadius={60}
        outerRadius={80}
        fill="#8884d8"
        label
      >
        {/* <Label value="Label one" position="centerBottom" offset={2} /> */}
        <Label content={icon} />
      </Pie>
    </PieChart>
  );
}
 

Я хочу отобразить звездный рейтинг в середине круговой диаграммы , я отрисовал 5 значков SVG в качестве метки, но он отображается только поверх других, я хочу отобразить их как обычный рейтинг, Если я использую div вместо родителя SVG и отрисовываю значки внутри него, он даже не отображается, но может просматривать и видеть элементы, я использую круговую диаграмму здесь .

пример песочницы здесь

текущий вид круговой диаграммы

единственное решение, которое я могу предложить, — это создать оболочку с position: relative и после создания новой сплошной верхней части диаграммы

Для кода есть ссылка