SVG图标渐变颜色串色问题咨询：首个SVG的渐变颜色传递至后续SVG

兄弟，这个坑我之前也踩过！问题出在SVG元素的ID是全局生效的——你两个图标里的线性渐变都用了同一个ID paint0_linear，浏览器渲染时只会加载第一个定义的渐变（也就是第一个图标的绿色渐变），第二个图标里的红色渐变定义直接被忽略了，所以它就“错用”了第一个的渐变。

为什么Figma导出会这样？因为Figma导出单个SVG时，会给渐变生成默认ID（比如paint0_linear），但导出多个图标时，它不会自动给每个图标里的渐变生成唯一ID，导致多个SVG的<defs>标签里出现重复ID，进而触发全局冲突。

解决方案：给每个渐变设置唯一ID #

最简单的解决办法就是手动修改每个SVG里的渐变ID，确保它们在整个文档中不重复：

修改后的第一个SVG（成功图标） #

<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="64" cy="64" r="64" fill="url(#paint0_linear-success)"/>
 <path d="M31.7628 63.2679L59.7926 85.5881L98.3475 34.6986" stroke="white" stroke-width="18"/>
 <defs>
 <linearGradient id="paint0_linear-success" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
 <stop stop-color="#26A212" stop-opacity="0.4"/>
 <stop offset="0.0001" stop-color="#26A212" stop-opacity="0.47"/>
 <stop offset="1" stop-color="#26A212"/>
 </linearGradient>
 </defs>
</svg>

修改后的第二个SVG（错误图标） #

<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="64" cy="64" r="64" fill="url(#paint0_linear-error)"/>
 <line x1="35.636" y1="92.636" x2="92.636" y2="35.636" stroke="white" stroke-width="18"/>
 <line x1="35.364" y1="35.636" x2="92.364" y2="92.636" stroke="white" stroke-width="18"/>
 <defs>
 <linearGradient id="paint0_linear-error" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
 <stop stop-color="#26A212" stop-opacity="0.4"/>
 <stop offset="0.0001" stop-color="#B81818" stop-opacity="0.47"/>
 <stop offset="1" stop-color="#B81818"/>
 </linearGradient>
 </defs>
</svg>

你只需要把每个SVG里的渐变ID改成独一无二的（比如加上图标用途后缀），同时把对应元素的fill属性里的URL也同步修改，就能解决这个冲突问题啦。

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