CSS 不会覆盖表示性 SVG 属性

Question

我有一个 SVG 形状作为我的 SVG Sprite 的一部分:

<symbol id="flickr-logo" viewBox="-41.5 532.5 200 91.626">
    <circle fill="#0063DB" cx="4.313" cy="578.312" r="45.813" class="left" ></circle>
    <circle fill="#FF0084" cx="112.687" cy="578.312" r="45.813" class="right"></circle>
</symbol>

现在当我使用 <svg ..><use ...></use></svg>等等，以在我的页面上包含实际形状，它工作得很好，SVG 圆圈内的填充显示正常。

现在，当我从下面添加我的 css 时:

.left {
  fill: #ffffff;
}

.right {
   fill: #ffffff;
}

没有任何反应。我看到样式正在应用，但 fill="???"圆形元素上的表示属性似乎是压倒一切的。有没有办法让 CSS 胜出？

如果我删除 fill="????"属性然后 css 样式完美工作，但我需要保留它们。

我考虑过编辑 SVG 中的颜色，但我不能，因为我需要在两个位置显示此形状。一个是默认颜色，另一个是我需要将填充更改为白色的地方。

关于如何做到这一点有什么想法吗？

谢谢，尼尔

Answer 1

我建议您删除填充，然后可以应用 CSS 并按预期工作。

你说你不能这样做，因为你在两个地方使用 SVG。但是您的标记显示

<symbol id="flickr-logo" viewBox="-41.5 532.5 200 91.626">

所以我猜想，您必须在其他地方使用另一个 ID(或者您可以在其他地方使用另一个 ID)，例如 id="flickr-logo-alt"，因为页面上的所有 ID 实际上确实需要唯一。

然后您可以应用两个小的 CSS 来设置两个版本的样式。

#flickr-logo .left {
  fill: #0063DB;
}
#flickr-logo .right {
   fill: #FF0084;
}
#flickr-logo-alt .left {
  fill: #ffffff;
}
#flickr-logo-alt .right {
   fill: #ffffff;
}

如果您有其他引用 ID 的样式，并且您没有同时在页面上使用两个样式，那么您可以为备用大小写“alt”的符号添加一个类，像这样使用不同的类。该类可以直接应用或通过脚本应用。

<symbol class="alt" id="flickr-logo" viewBox="-41.5 532.5 200 91.626">

#flickr-logo .left {
  fill: #0063DB;
}
#flickr-logo .right {
   fill: #FF0084;
}
#flickr-logo.alt .left {
  fill: #ffffff;
}
#flickr-logo.alt .right {
   fill: #ffffff;
}

或者只是在 alt 案例中已经存在的左侧和右侧应用一个额外的类。可以直接应用或通过脚本应用。

<circle cx="4.313" cy="578.312" r="45.813" class="left alt" ></circle>
<circle cx="112.687" cy="578.312" r="45.813" class="right alt"></circle>

.left {
  fill: #0063DB;
}
.right {
   fill: #FF0084;
}
.left.alt {
  fill: #ffffff;
}
.right.alt {
   fill: #ffffff;
}