用react将SVG分组和居中

Question

我正在尝试创建某种进度指示器，以显示某人在React应用程序中的某个位置。最终结果应如下所示：

为此，我首先使用svg's为圆创建一个带有步骤号和标签的圆的组件，但是我的问题是我不知道如何在不剪切标签文本的情况下居中。这是我的代码：

import React from 'react';
import colors from '../../stylesheets/colors';

const ProgressNode = (props) => {
  const {
  width = 4,
  radius = 60,
  color = colors.DISABLED,
  text = '1',
  textColor = colors.DISABLED,
  fontSize = radius - 5,
  label = 'Confirm Location',
} = props;

// subtract stroke width from radius to avoid clipping
const r = radius - (width * 2);

return (
  <div style={{ margin: 100, border:'2px solid red'}}>
    <svg
      height={radius * 4}
      width={radius * 4}
    >
      <svg
        height={radius * 2}
        width={radius * 2}
        cx={radius}
        cy={radius}
      >
        <circle
          fill="transparent"
          strokeWidth={width}
          r={r}
          cx={radius}
          cy={radius}
          stroke={color}
        />
        <text
          x="50%"
          y="50%"
          textAnchor="middle"
          stroke={textColor}
          strokeWidth={width - 1}
          fontSize={fontSize}
          fill={textColor}
          // dy=".3em"
        >
          <tspan x="50%" dy=".3em">{text}</tspan>
          <tspan x="50%" dy="1.8em">{label}</tspan>
        </text>
      </svg>
    </svg>
  </div>
);
};

export default ProgressNode;

问题是标签文本被剪切

有人知道我如何将标签文本置于圆圈的中心，如果您有任何想法如何布置节点和线条，那将是一个加成：）