SVG中Radial Gradient无法正常显示问题求助

你的SVG仅显示最后一个渐变颜色，核心存在两处问题：

1. 渐变引用语法错误 #

<path>的stroke属性中，url(#paint0 缺少闭合的右括号，浏览器无法正确识别渐变引用，导致渲染逻辑异常。修正后应为：

stroke="url(#paint0)"

2. 渐变起始偏移缺失 #

你的第一个<stop>的offset设为0.162057，SVG渐变中0到该偏移值的区间会默认沿用第一个stop的颜色，导致渐变起始段出现不必要的纯色块。建议将第一个stop的offset改为0，保证渐变从路径起点完整过渡。

另外，虽然不影响功能，但将<defs>放在SVG最顶部是更规范的写法，可避免部分渲染引擎的解析顺序问题。

修复后的完整代码 #

<svg width="174" height="148" viewBox="0 0 174 148" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
    <radialGradient id="paint0" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
        gradientTransform="translate(86.9404 85.5195) rotate(90) scale(82.5 81.5403)">
        <stop offset="0" stop-color="#F03944" />
        <stop offset="0.220719" stop-color="#FECA24" />
        <stop offset="0.347227" stop-color="#F2878D" />
        <stop offset="0.440938" stop-color="#C173FE" />
        <stop offset="0.633595" stop-color="#C173FE" />
        <stop offset="0.749274" stop-color="#076CFB" />
        <stop offset="0.868283" stop-color="#076CFC" />
    </radialGradient>
</defs>
<path
    d="M150.03 140.77C162.4 126.28 169.87 107.48 169.87 86.94C169.87 41.14 132.74 4 86.93 4C41.12 4 4 41.13 4 86.93C4 109.04 12.65 129.13 26.75 143.99"
    stroke="url(#paint0)" stroke-width="8" stroke-miterlimit="10" stroke-linecap="round" />
</svg>

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