如何用JavaScript、React和HTML在SVG图形上方添加文本？

问题原因 #

• SVG的<circle>是基础图形元素，不属于容器元素，无法包含<text>作为子元素，嵌套的文本不会被浏览器渲染
• 创建<text>时未使用SVG命名空间，必须通过createElementNS()创建SVG类型的文本元素，否则浏览器会将其当作普通HTML元素处理
• 文本的坐标设置错误，当前x=8、y=2的位置不在圆形可视范围内，且SVG的y轴方向向下，需要调整到圆形中心位置
• SVG不支持z-index属性，元素堆叠顺序由DOM中的出现顺序决定，后添加的元素会显示在上方

修正后的代码 #

document.addEventListener('DOMContentLoaded', () => {
  const svg = document.getElementById('circlesSVG');
  const digitKeys = 10;
  for (let i = 0; i < digitKeys; i++) {
    // 创建SVG文本元素（必须用命名空间）
    const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    textElement.textContent = i;
    textElement.setAttribute('fill', 'white');
    textElement.setAttribute('alignment-baseline', 'middle');
    textElement.setAttribute('text-anchor', 'middle');
    // 设置文本坐标为圆形中心（和circle的cx、cy一致）
    textElement.setAttribute('x', 50);
    textElement.setAttribute('y', 50);
    textElement.setAttribute('font-size', '30');

    // 创建SVG圆形元素
    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    circle.setAttribute('class', 'digitKeys');
    circle.setAttribute('cx', 50);
    circle.setAttribute('cy', 50);
    circle.setAttribute('r', 33);
    circle.setAttribute('fill', 'steelblue');

    // 先添加圆形到SVG，再添加文本（文本会显示在圆形上方）
    svg.appendChild(circle);
    svg.appendChild(textElement);
  }
});

渲染后的正确SVG结构 #

<svg id="circlesSVG" width="100" height="100">
  <circle class="digitKeys" cx="50" cy="50" r="33" fill="steelblue"></circle>
  <text fill="white" alignment-baseline="middle" text-anchor="middle" x="50" y="50" font-size="30">0</text>
  <!-- 其他数字的circle和text依次排列 -->
</svg>

关键调整点 #

• 把<circle>和<text>都作为SVG的直接子元素，不再嵌套
• 用createElementNS()创建<text>，确保属于SVG命名空间
• 文本坐标和圆形中心对齐（x、y和circle的cx、cy保持一致），配合text-anchor和alignment-baseline实现居中显示
• 通过DOM添加顺序控制堆叠：先加圆形，后加文本，文本自然显示在上方

内容的提问来源于stack exchange，提问作者barbarbytes