如何在图表标签中呈现 SVG 图标答案

【问题标题】：How to render SVG icons in rechart Label如何在图表标签中呈现 SVG 图标
【发布时间】：2021-07-26 16:40:10
【问题描述】：

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

沙盒示例here

饼图的当前视图

【问题讨论】：

标签： reactjs svg pie-chart recharts

【解决方案1】：

我可以建议的唯一解决方案是使用position: relative 制作包装器，然后在图表上方制作新的实体

代码中有一个link

【讨论】：

我通过在