Html SVG文本标记未呈现在组上方

我正在创建一个小的堆叠条形图，其中包含3个条形项目（使用彩色

项目渲染）。这一切都是在

React

组件中完成的（我根据获得的一些输入构建这些组件）。组件的渲染函数如下所示：

<React.Fragment>
  <g key={this.props.id}>
    <rect
      width={`${
        this.props.value === 0 ? 2 : this.calculatePercentage(this.props.value)
      }%`}
      height={`15px`}
      x={`${this.getPosition()}%`}
      style={{ fill: this.props.color }}
      className={Styles.bar}
    />
    <text
      y={25}
      x={`${this.getPosition()}%`}
      transform={`translate(${this.getTextPosition()}, 0)`}
    >
      <a
        onClick={this.onClick}
        className={
          this.props.value === 0
            ? Styles.noResults
            : this.props.isSelected
            ? Styles.selectedText
            : Styles.filterText
        }
      >
        {this.props.label}
      </a>
    </text>
  </g>
  <text
    id={"percentage"}
    className={Styles.barText}
    x={`${this.getPosition() + 1}%`}
    y={11}
    transform={`translate(${0}, 0)`}
  >
    {this.calculatePercentage(this.props.value)}%
  </text>
  <use xlinkHref="#percentage" />
</React.Fragment>

完成日期：0
0%
草稿：0
48%
空：0
50%

在结束标记之前移动svg末尾的所有文本元素文本元素以编程方式添加到每个组标记的末尾-这意味着将其拆分为一个完全独立的组件-我想知道是否有更简单的方法不走这条路线？如果您看不同的图形解决方案（或者，顺便说一句，映射解决方案），你会发现它们都有单独的图形元素和标签层。这不仅仅是一个最佳实践，在SVG中真的没有办法解决。叹气-这让我心碎，但我们现在就到了。感谢你确认我对它最黑暗的怀疑-我将回到这一点的绘图板上。