为何SVG的textPath无法显示指定文本？

你的文本未显示主要有两个核心问题：

1. 默认字号与 viewBox 不匹配 #

SVG 的 viewBox="-1 -1 2 2" 定义了整个画布仅为 2x2 的坐标范围，但 <text> 元素默认的 font-size 是 16，这个尺寸远大于你绘制的路径长度（从(0,0)到(0.5,0.5)的直线距离仅约0.707），导致文本完全超出路径范围，自然无法显示。

2. 文本颜色与背景重叠 #

默认的文本填充色是黑色，和你的部分图形颜色重叠，即使字号合适也可能被遮挡，建议显式设置对比色。

修复后的完整代码 #

<?xml version="1.0" encoding="UTF-8"?>
<svg
  xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 2 2" width="200" height="200"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <g fill="black">
        <polygon points="1.0,0.0 -0.4999999999999998,0.8660254037844387 -0.5000000000000004,-0.8660254037844384"></polygon>
    </g>
    <g fill="red">
        <polygon points="0.94,0.0 -0.46999999999999975,0.8140638795573724 -0.4700000000000004,-0.814063879557372"></polygon>
    </g>
    <polygon fill="orange" points="0.94,0.0 0.614374448177051,0.18800000000000003 0.6143744481770509,-0.18799999999999994"></polygon>
    <polygon fill="orange" points="-0.46999999999999975,0.8140638795573724 -0.4699999999999999,0.43806387955737236 -0.14437444817705086,0.6260638795573723"></polygon>
    <polygon fill="orange" points="-0.4700000000000004,-0.814063879557372 -0.14437444817705136,-0.6260638795573721 -0.47000000000000025,-0.438063879557372"></polygon>
    <circle fill="green" cx="0" cy="0" r="0.47"></circle>
    <circle fill="blue" cx="0" cy="0" r="0.37"></circle>
    
    <path id="text_path_XQjkCgSWaBUILYrAVcMt" fill="white" stroke="red" stroke-width="0.01" d="M0,0 L0.5,0.5"></path>
    <text font-size="0.15" fill="white" stroke="black" stroke-width="0.005">
        <textPath xlink:href="#text_path_XQjkCgSWaBUILYrAVcMt" method="stretch" lengthAdjust="spacingAndGlyphs">look at me</textPath>
    </text>
</svg>

关键修改说明 #

• 添加 font-size="0.15"：将文本尺寸适配到 viewBox 的小坐标范围，确保文本能在路径内显示。
• 显式设置 fill="white" 和 stroke="black"：让文本与蓝色圆形、红色路径形成明显对比，避免被遮挡。
• 保留 method="stretch" 和 lengthAdjust="spacingAndGlyphs"：让文本自动拉伸以适配路径长度。

进阶适配方案（自动匹配路径长度） #

如果不想手动调整字号，可以通过 textLength 属性指定路径的实际长度，让浏览器自动缩放文本：

<text fill="white" stroke="black" stroke-width="0.005">
    <textPath xlink:href="#text_path_XQjkCgSWaBUILYrAVcMt" method="stretch" lengthAdjust="spacingAndGlyphs" textLength="0.707">look at me</textPath>
</text>

这里的 0.707 是路径的直线距离（可通过几何计算或工具获取），浏览器会自动调整文本大小和间距，完全适配路径。

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