如何用CSS为重复SVG背景图案添加线性渐变遮罩？

你需要让SVG重复图案中的路径单独应用线性渐变，而非通过CSS背景层叠加实现，最佳方案是将渐变定义在SVG内部，直接让路径的描边引用该渐变。

修改思路 #

1. 在SVG的<defs>中添加线性渐变定义，设置渐变方向与颜色节点，使用gradientUnits="userSpaceOnUse"让渐变基于整个容器空间（而非单个图案单元），实现跨重复图案的连贯渐变效果。
2. 将SVG路径的stroke属性从纯色改为引用内部的渐变。
3. 移除CSS中额外的线性渐变背景层，仅保留整合了渐变的SVG背景。

修改后的完整代码 #

.hexgrad {
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='gradient' gradientUnits='userSpaceOnUse' x1='0%' y1='0%' x2='0%' y2='100%'><stop offset='0%' stop-color='%23F8F3F0' stop-opacity='0.15'/><stop offset='50%' stop-color='%23FB923C' stop-opacity='0.15'/><stop offset='100%' stop-color='%23F8F3F0' stop-opacity='0.15'/></linearGradient><pattern id='a' patternUnits='userSpaceOnUse' width='29' height='50.115' patternTransform='scale(1.5) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 100%, 0)'/><path d='M14.498 16.858L0 8.488.002-8.257l14.5-8.374L29-8.26l-.002 16.745zm0 50.06L0 58.548l.002-16.745 14.5-8.373L29 41.8l-.002 16.744zM28.996 41.8l-14.498-8.37.002-16.744L29 8.312l14.498 8.37-.002 16.745zm-29 0l-14.498-8.37.002-16.744L0 8.312l14.498 8.37-.002 16.745z' stroke-width='1' stroke='url(%23gradient)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
    background-color: #F8F3F0; /* 可选：设置底色匹配渐变首尾颜色，视觉更统一 */
}

关键细节说明 #

• 渐变定义：linearGradient中的stop节点对应目标渐变颜色，stop-opacity设为0.15，与原纯色描边透明度一致；gradientUnits='userSpaceOnUse'确保渐变沿容器垂直方向延伸，重复路径会自然衔接成完整渐变效果。
• 路径引用渐变：路径的stroke='url(%23gradient)'（#转义为%23适配URL编码）直接引用内部渐变，替代原纯色描边。
• 底色补充：添加background-color可让容器底色与渐变首尾颜色匹配，避免出现视觉空隙。

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