如何在 rechart Label 中渲染 SVG 图标

问题描述

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",{ 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 父级和其中的渲染图标，它甚至不显示，但可以检查和查看元素，我在这里使用 rechart 饼图。

沙盒示例 here

饼图的当前视图

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）