Question

我有一个带有多个矩形的SVG，它们在向下移动SVG时会改变填充颜色（以某种渐变外观）。用户可以选择纯色填充颜色以“主题”他们的体验。此颜色替换了矩形的“渐变”颜色。我正在使用CSS变量进行此操作。

但是，如果他们不选择主题颜色，我想默认返回SVG中定义的填充颜色。在这种情况下，CSS变量设置为''，使其无效。对于其他元素，我使用默认值，即该元素回退。我不能使用SVG矩形来做到这一点，因为它们都是不同的。我尝试删除默认值，但我相信这会将填充设置为其初始CSS值，该值是透明的。

如果我有以下提示： <rect id="rect" fill="#000000" x="0" y="0" width="200" height="50" rx="6"></rect>和以下CSS：rect { fill: var(--preview-primary); }我希望--preview-primary无效时它是黑色的，但它是透明的。

有没有办法做到这一点？谢谢。

Answer 1

否，无法回退到fill属性。

拥有有效的fill CSS规则将优先于fill属性。对于CSSOM，var(--anything)始终是有效规则。如果var()函数的计算无效，则它将回退到默认值。并且fill的默认值为black：

#f {
  fill: var(--foobar);
}

<svg>
  <rect id="f" x="0" y="0" height="80" width="80" fill="green"/>
</svg>

要解决这种情况，您有几种选择：

如果您无法修改SVG，则只有当值不是""时，才能启用用户选择的规则。

sel.onchange = e => {
  document.documentElement.style
    .setProperty('--selected-color', sel.value);
  // toggle a class so we know we have to handle it
  document.documentElement.classList
    .toggle('user-selected-color', sel.value !== "");
};

.user-selected-color rect {
  fill: var(--selected-color);
}
select{vertical-align:top}

<svg height="180" width="180">
  <rect x="0" y="0" height="80" width="80" fill="green"/>
  <rect x="90" y="0" height="80" width="80" fill="blue"/>
  <rect x="0" y="90" height="80" width="80" fill="red"/>
  <rect x="90" y="90" height="80" width="80" fill="black"/>
</svg>

<select id="sel">
  <option value="">none</option>
  <option>orange</option>
  <option>pink</option>
  <option>violet</option>
  <option>aqua</option>
</select>

如果可以的话，可以设置每个元素的CSS color，然后回退到CSS值currentColor：

sel.onchange = e => {
  document.documentElement.style
    .setProperty('--selected-color', sel.value);
};

rect {
  fill: var(--selected-color, currentColor);
}
select{vertical-align:top}

<svg height="180" width="180">
  <rect x="0" y="0" height="80" width="80" fill="green" style="color:green"/>
  <rect x="90" y="0" height="80" width="80" fill="blue" style="color:blue"/>
  <rect x="0" y="90" height="80" width="80" fill="red" style="color:red"/>
  <rect x="90" y="90" height="80" width="80" fill="black" style="color:black"/>
</svg>

<select id="sel">
  <option value="">none</option>
  <option>orange</option>
  <option>pink</option>
  <option>violet</option>
  <option>aqua</option>
</select>

Answer 2

从SVG移除fill样式，并在未定义变量时在CSS中放置默认的“后备”颜色。

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

rect {
  fill: var(--preview-primary, black);
}

.red {
  --preview-primary: red;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="100" width="100"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect class="red" x="10" y="10" height="100" width="100"/>
</svg>

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

2 个答案: