如何正确在SVG路径上方添加文本标签？已尝试但未成功

核心问题原因 #

SVG内部元素的渲染层级完全由DOM中的顺序决定，HTML的z-index属性对SVG内部元素无效（仅当SVG作为HTML块级元素时，z-index控制它和其他HTML元素的层级，不影响内部路径和文本）。你之前设置SVG的z-index:-1只会让整个SVG在其他HTML元素下方，反而可能加剧问题。

具体解决步骤 #

1. 调整元素顺序
   把<text>标签放在对应的州路径元素之后。SVG渲染时，后出现的元素会叠加在前面的元素上方。示例结构：

   <!-- 先定义州路径 -->
   <path d="M100,200 L300,400 ..." fill="#666" />
   <!-- 再放置文本元素，确保在路径之后 -->
   <text font-size="42.5" transform="matrix(1 0 0 1 517 302)" cursor="pointer">AK</text>
   

2. 修正文本定位冲突
   你当前的<text>同时使用了transform和x/y属性，两者会叠加偏移，导致文本位置偏离预期。建议只保留一种定位方式：

   • 保留transform的话，删除x="61"和y="43"：

     <text font-size="42.5" transform="matrix(1 0 0 1 517 302)" cursor="pointer">AK</text>
     

   • 改用x/y定位的话，删除transform属性：

     <text font-size="42.5" x="517" y="302" cursor="pointer">AK</text>
     

3. 可选优化

   • 如果不需要文本响应点击事件，给文本添加pointer-events: none，避免干扰路径的交互：

     <text font-size="42.5" transform="matrix(1 0 0 1 517 302)" cursor="pointer" style="pointer-events: none;">AK</text>
     

   • 确保文本的fill颜色和路径填充色有足够对比度，避免因颜色相近看起来“未显示”。

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