Question

我有一个SVG形状作为我的SVG精灵的一部分：

<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 =＆＃34; flickr-logo-alt＆＃34;因为页面上的所有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的样式，并且您不会同时在页面上有两个样式，那么您可以在备用案例的符号中添加一个类＆＃34; alt＆＃34;使用这样的不同类。该类可以直接应用或通过脚本应用。

<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;
}

CSS不会覆盖表示性SVG属性

1 个答案: