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

我有一个不同的路径，椭圆等svg他们有不同的填充颜色。说红色&蓝色。现在，我将它们全部放入sprite中，并且现在想要使用悬停时的css修改填充颜色，所以我通常会做的是从svg中删除填充并使用css'fill属性完成所有操作。SVG/CSS - 用不同的颜色填充不同的路径

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

来源

2017-04-19 George Welder

为了让我们不用猜测，我们需要查看SVG – LGSon

您必须编写脚本。 –

我已经添加了一个片段（以某种方式工作）到您的问题。可能现在你可以澄清你的目标。 – vals

您可以添加不同的类，每个路径：

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

然后瞄准在你的CSS这些类：

.circleClass { 
    fill: red; 
}

来源

2017-04-19 12:28:24 Toby

非常感谢。我想知道如何做翱翔。 '.circleClass：hover'似乎不起作用。我也尝试过'.icon：hover.circleClass {...'，（其中icon是svg的类，不是svg中的类），但这似乎也不起作用。 –

您需要发布当前代码的最简单示例，以便任何人都可以对其进行故障排除。 – Toby

我会编辑我的问题！ –

您可以将类添加到每个路径，也可以使用第十一个孩子。

下面是一个简单的例子：

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

来源

2017-04-19 12:37:43 Gianno

你在做什么不能工作。在<use>元素下的DOM中不存在通过<use>引用的任何内容。

.icon:hover .outer { }

不会起作用，因为与outer类的路径是不是.icon后代。如果你想对一个符号的内容进行样式设计，你需要通过直接将符号应用于符号来完成。例如：

#btn-tester .outer { }

不幸的是:hover事件不适用于符号。所以你不能这样做：

#btn-tester:hover .outer { }

即使这样做，你可能不想那样做。如果页面上有该符号的其他用途，它也会改变它们。

您可能将不得不在您想要的页面上内联SVG。而不是使用符号。

来源

2017-04-19 14:50:31

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

回答

相关问题