如果无效，CSS变量默认为SVG填充

我有一个SVG，它有许多矩形，当它们沿着SVG向下移动时（以一种渐变的形式）会改变填充颜色。用户可以选择一种纯色填充颜色来“主题化”他们的体验。此颜色替换矩形的“渐变”颜色。我使用CSS变量来实现这一点

但是，如果他们没有选择主题颜色，我希望默认返回SVG中定义的填充颜色。在这种情况下，CSS变量设置为

'

，使其无效。对于其他元素，我使用的是该元素返回的默认值。我不能用SVG矩形实现这一点，因为它们都是不同的。我尝试删除默认值，但我相信这会将填充设置为它的初始CSS值，这是透明的

如果我有以下矩形：

和以下CSS:

rect{fill:var（--preview primary）；}

当

--preview primary

无效时，我希望它是黑色的，但它是透明的

---

我有办法做到这一点吗？谢谢。

从SVG中删除

fill

样式，并在CSS中放置一个默认的“fallback”颜色，以便在未定义变量时使用

rect {
  fill: var(--preview-primary, 000);
}

rect{
填充：var（--预览主，黑色）；
}
瑞德先生{
--预览初级：红色；
}

---

否，无法回退到

填充属性

拥有有效的
fill
CSS规则将优先于
fill
属性。
对于CSSOM，
var（--anything）
始终是有效的规则。如果
var（）
函数的计算无效，那么它将返回默认值。
fill
的默认值为
black
：


#f{
填充：var（--foobar）；
}
我最终使用了一个父类来切换填充颜色，类似于您的第一个建议。感谢您在回复中付出的巨大努力！