SVG / CSS - 用不同的颜色填充不同的路径

Question

我有一个带有不同路径、椭圆等的 svg。它们有不同的填充颜色。说红蓝。现在，我将它们全部放入一个精灵中，现在想在悬停时用 css 修改填充颜色，所以我通常会做的是从 svg 中删除填充并用 css 做所有事情fill 属性.

但是，因为我这里有不同的颜色，我不能简单地做fill:red，因为所有东西都是红色的，但我希望其中一些是蓝色的。

Answer 1

您可以为每个路径添加不同的 class：

<circle  class="circleClass" cx="40" cy="50" r="26"/>
<square  class="squareClass"   cx="40" cy="50" r="26"/>

然后在您的 CSS:

中定位那些 classes

.circleClass {
  fill: red;
}

Answer 2

您可以在每个路径中添加一个 class，或者您可以使用第 n 个子路径。

这是一个简单的例子：

<path bla-bla-bla>
<path bla-bla-bla>
<path bla-bla-bla>

path:nth-child(1){
   fill:red;
}

path:nth-child(2){
   fill:blue;
}

path:nth-child(3){
   fill:green;
}

Answer 3

你所做的是行不通的。通过 <use> 引用的任何内容都不存在于 <use> 元素下的 DOM 中。

.icon:hover .outer { }

将不起作用，因为带有 class outer 的路径不是 .icon 的后代。如果你想为符号的内容设置样式，你需要通过将规则直接应用于符号来实现。例如：

#btn-tester .outer { }

很遗憾，:hover 事件不适用于符号。所以你不能这样做：

#btn-tester:hover .outer { }

即使这样做有效，您也可能不想这样做。如果该符号在页面上有任何其他用途，它也会更改它们。

您可能只需要将 SVG 内联到页面上您想要的位置。而不是使用符号。

SVG / CSS - 用不同的颜色填充不同的路径

SVG / CSS - fill different paths with different colours

html

css

svg

fill