SVG中<image>标签上方无法显示文本的问题求助

SVG文本无法叠加在上方的解决方案 #

问题核心原因 #

SVG内部元素的层级完全由代码编写顺序决定，后出现的元素会渲染在上方；且SVG内部元素不支持使用z-index调整层级，你之前加的z-index:-1完全无效。另外你的代码里还有几处语法错误，也会影响渲染效果。

具体修正步骤 #

• 修正<image>的href路径：原路径开头多了</，改为/wp-content/uploads/2025/01/FC-Home-Icon.svg
• 调整元素顺序：把<image>放在<text>前面，让后渲染的文本自然叠加在图片上方
• 修正语法错误：闭合<image>标签（添加/>），去掉font-size里多余的.（改为36px）
• 移除无效样式：删除<image>上的z-index:-1

修正后的完整代码 #

<g id="property-7" class="available">
     <image class="available-lg-house" x="762" y="355" href="/wp-content/uploads/2025/01/FC-Home-Icon.svg" />
     <text transform="translate(774 392)" style="font-size: 36px;">70</text>
</g>

内容的提问来源于stack exchange，提问作者Peter W.