使用 svg 圆和文本在饼图中围绕中心对齐文本

Question

我使用 react 和 svg 圆圈创建了一个饼图。现在我想定位文本标签，使文本从靠近圆圈的中间开始，然后向外继续，财富之轮风格。

这是我的代码，渲染 svgs。在 chrome 开发工具中，我尝试应用 tranform: rotate(45deg); 并调整数字，但文本一直在圈外飞走。

<svg viewBox="0 0 32 32">
    {elements.map((element, index) => (
        <g>
            <circle
                key={_id}
                r={16 / 1.0053}
                cx={'50%'}
                cy={'50%'}
                style={{
                    strokeDasharray: `${percentage}, 100.53`,
                    strokeDashoffset: -offset,
                    stroke: segmentColor,
                }}
                textAnchor="middle"
            ></circle>
            <text
                textAnchor="middle"
                x={'50%'}
                y={'50%'}
                fontFamily={'sans-serif'}
                fontSize={'20px'}
                fill="black"
                textAnchor="start"
            >
                {title}
            </text>
        </g>
    ))}
</svg>
``` 

Answer 1

问题是旋转是关于原点的，即图像的左上角。解决这个问题的最简单方法是更改​​ viewBox，使原点位于 SVG 的中心：viewBox="-16 -16 32 32"。

然后根据偏移量和百分比计算角度。

我假设你有一些这样的元素：

const elements = [
    { percentage: 15, offset: 0, title: 'title', segmentColor: 'red' },
    { percentage: 40, offset: 15, title: 'another title', segmentColor: 'blue' },
    { percentage: 25, offset: 55, title: 'and another', segmentColor: 'green' },
    { percentage: 20, offset: 80, title: 'yet another', segmentColor: 'black' },
];

所以这样的事情会起作用：

<svg viewBox="-16 -16 32 32">
    {elements.map((element, index) => {
        const angle = (element.offset + element.percentage / 2) * 360 / 100;

        return <g key={index}>
            <circle
                r={15.5}
                style={{
                    fill: 'none',
                    strokeDasharray: `${element.percentage}, 100.53`,
                    strokeDashoffset: -element.offset,
                    stroke: element.segmentColor,
                }}
                textAnchor="middle"
            ></circle>
            <text
                x="10%"
                transform={`rotate(${angle})`}
                fontFamily={'sans-serif'}
                fontSize={'2px'}
                fill="black"
                textAnchor="start"
                alignmentBaseline="middle"
            >
                {element.title}
            </text>
        </g>
    })}
</svg>

现在文本上的 x 值决定了文本如何从中心开始。