如何为多段SVG Path应用整体连贯的渐变色彩

默认情况下，SVG线性渐变的gradientUnits属性值是objectBoundingBox——意思是每个<path>都会以自己的边界框为基准计算渐变范围，所以你看到的是每个小矩形各自从黄到紫，而不是整体连贯的渐变。

要实现整体渐变，只需要把渐变的参考系改成整个SVG画布的用户坐标系：

• 在<linearGradient>标签里添加gradientUnits="userSpaceOnUse"
• 调整x1、y1、x2、y2到你想要的渐变起止坐标（对应你要的左上角到左下角，这里设为从(10,10)到(10,100)，刚好覆盖三个路径的纵向范围）

修改后的完整代码：

<svg width="300" height="300" viewBox="0 0 300 300">
    <defs>
        <linearGradient id="gradient1" 
                        x1="10" y1="10" 
                        x2="10" y2="100"
                        gradientUnits="userSpaceOnUse">
            <stop offset="0%" stop-color="#f5f242" />
            <stop offset="100%" stop-color="#5430e6" />
        </linearGradient>
    </defs>

    <g fill="url(#gradient1)">
        <path d="M 10 10 h 90 v 6 h -90" />
        <path d="M 100 10 v 90 h 6 v -90" />
        <path d="M 10 94 h 90 v 6 h -90" />
    </g>
</svg>

修改后，渐变会基于整个SVG的用户坐标渲染：左上角的水平条是黄色，右侧竖条从上到下从黄过渡到紫，底部的水平条则是紫色，完全符合你想要的整体连贯渐变效果。

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