SVG渐变填充不显示：为面积图应用linearGradient失败求助

核心错误点 #

• style属性语法错误：style='fill=: url(#gradient1)'里的fill=:是无效语法，正确应为fill: url(#gradient1)，多余的等号导致浏览器无法解析填充规则。
• 渐变坐标与图形区域不匹配：linearGradient设置的y1='25' y2='50'，但SVG viewBox是0 0 150 100，面积图的点y值大多在70-100区间，渐变完全落在图形显示范围外，即使语法正确也看不到效果。
• polyline填充的兼容性问题：虽然用了Z闭合指令，但polyline的填充逻辑不如polygon稳定，polygon更适合闭合图形的填充场景。
• fill-opacity设置过低：fill-opacity='0.1'会让渐变几乎透明，即使显示也难以察觉。

修复后的完整代码 #

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Livello_1' x='0px' y='0px' viewBox='0 0 150 100' xml:space='preserve'>
    <defs>
        <!-- 调整渐变坐标匹配图形的y范围（70-100） -->
        <linearGradient id='gradient1' x1='0' y1='70' x2='0' y2='100' gradientUnits='userSpaceOnUse'>
            <stop stop-color='#cd62db' offset='0'></stop>
            <stop stop-color='#0c2e89' offset='1'></stop>
        </linearGradient>
    </defs>
    <!-- 替换为polygon，修正style语法，调整fill-opacity -->
    <polygon style='fill: url(#gradient1); fill-opacity: 0.7; stroke: #0c2e89; stroke-width: 1' 
         points='0 100, 0 83, 1 84, 2 77, 3 76, 4 79, 6 79, 7 76, 8 77, 9 75, 10 77, 12 79, 13 82, 14 86, 15 90, 16 89, 18 90, 19 96, 20 97, 21 90, 22 93, 24 96, 25 87, 26 96, 27 95, 28 82, 30 82, 31 87, 32 83, 33 90, 34 87, 36 100, 37 95, 38 97, 39 96, 40 91, 42 91, 43 80, 44 73, 45 75, 46 74, 48 83, 49 86, 50 83, 51 74, 52 81, 54 86, 55 75, 56 77, 57 86, 58 84, 60 87, 61 94, 62 93, 63 89, 64 86, 66 86, 67 87, 68 88, 69 88, 70 95, 150 100'/>
    <text font-family='Segoe UI' font-size='24' x='90' y='20'> 98%</text>
</svg>

关键修复说明 #

1. 修正style语法：删除fill:前多余的等号，确保浏览器能正确识别渐变填充规则。
2. 调整渐变坐标：将渐变y轴范围改为70-100，覆盖面积图的实际显示区间，让渐变效果作用在图形上。
3. 替换为polygon元素：polygon专为闭合图形设计，填充渲染更稳定，同时规范了点列表的分隔格式。
4. 调整fill-opacity：从0.1改为0.7，让渐变效果清晰可见，可根据需求自行调整该值。

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