HTML中SVG文本元素下划线颜色无法自定义的问题咨询

你遇到的问题是SVG中直接把带颜色的text-decoration作为元素属性时，下划线颜色会继承文本的fill值，无法生效——因为SVG原生的text-decoration属性不支持带颜色的简写语法，必须通过CSS样式来设置。

解决方法1：通过CSS style属性设置（推荐） #

把下划线的样式和颜色定义在style属性里，使用完整的CSS text-decoration简写语法，或者拆分属性单独设置：

<svg id="svg" viewBox="0 0 300 154">
    <text x="150" y="79" 
          style="font-size: 80px; font-family: Brush Script MT; 
                 text-decoration: underline solid #0fc224;" 
          id="10" fill="#e00000">text</text>
</svg>

或者拆分属性更清晰：

<svg id="svg" viewBox="0 0 300 154">
    <text x="150" y="79" 
          style="font-size: 80px; font-family: Brush Script MT; 
                 text-decoration-line: underline; 
                 text-decoration-style: solid; 
                 text-decoration-color: #0fc224;" 
          id="10" fill="#e00000">text</text>
</svg>

核心是必须把text-decoration相关样式放在style属性中，而不是作为<text>的独立原生属性。

解决方法2：手动绘制下划线（兼容旧环境） #

如果需要适配不支持text-decoration-color的旧渲染环境，可以用<underline>元素手动绘制：

<svg id="svg" viewBox="0 0 300 154">
    <text x="150" y="79" style="font-size: 80px; font-family: Brush Script MT" id="10" fill="#e00000">
        text
        <underline stroke="#0fc224" stroke-width="2">
            <textPath href="#text-underpath">text</textPath>
        </underline>
    </text>
    <defs>
        <!-- 路径长度根据文本实际宽度调整，适配示例中的80px"text" -->
        <path id="text-underpath" d="M150,85 H225" />
    </defs>
</svg>

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