SVG中如何复用公共linearGradient并通过CSS修改渐变颜色？

问题根因 #

.green #sharedGradient选择器无法匹配到任何元素：#sharedGradient是定义在<defs>下的全局唯一节点，不属于带.green类的<rect>的子元素，因此覆盖变量的规则完全不生效。同时将自定义属性绑定在渐变元素本身的写法，也无法让不同引用渐变的元素读取到差异化的变量值。

实现方案 #

无需修改现有SVG结构、无需重复编写渐变标签，仅调整CSS规则即可实现需求：将自定义属性定义在使用渐变的.node元素上，SVG渐变内部的var()会自动继承自引用该渐变的元素的自定义属性值，天然支持差异化配置。

修改后的CSS代码 #

.node {
  fill: url(#sharedGradient) #00FF00;
  /* 默认渐变变量定义在使用渐变的节点上 */
  --color-top: #f12c06;
  --color-bot: #faed34;
}
/* 带green类的节点直接覆盖变量即可 */
.node.green {
  --color-top: #00ff00;
  --color-bot: #00dd00;
}

修改后效果：第一个矩形显示红到黄的默认渐变，第二个带.green类的矩形显示绿到深绿的渐变，完全符合预期。

兼容说明 #

上述方案兼容Chrome 49+、Firefox 31+、Safari 9.1+，覆盖绝大多数现网用户场景。如果需要兼容极端老旧浏览器，可以用JS动态修改<linearGradient>下的<stop>的stop-color属性实现效果，但需要注意操作时会全局修改渐变颜色，要配合元素的显示逻辑做同步调整，优雅度低于CSS方案。

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