SVG/CSS - 用不同的颜色填充不同的路径
我有一个不同的路径,椭圆等svg他们有不同的填充颜色。说红色&蓝色。现在,我将它们全部放入sprite中,并且现在想要使用悬停时的css修改填充颜色,所以我通常会做的是从svg中删除填充并使用css'fill
属性完成所有操作。SVG/CSS - 用不同的颜色填充不同的路径
但是,因为我在这里有不同的颜色,所以我不能简单地做fill:red
,因为一切都会变成红色,但我希望其中的一些变成蓝色。
您可以添加不同的类,每个路径:
<circle class="circleClass" cx="40" cy="50" r="26"/>
<square class="squareClass" cx="40" cy="50" r="26"/>
然后瞄准在你的CSS这些类:
.circleClass {
fill: red;
}
非常感谢。我想知道如何做翱翔。 '.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;
}
你在做什么不能工作。在<use>
元素下的DOM中不存在通过<use>
引用的任何内容。
.icon:hover .outer { }
不会起作用,因为与outer
类的路径是不是.icon
后代。如果你想对一个符号的内容进行样式设计,你需要通过直接将符号应用于符号来完成。例如:
#btn-tester .outer { }
不幸的是:hover
事件不适用于符号。所以你不能这样做:
#btn-tester:hover .outer { }
即使这样做,你可能不想那样做。如果页面上有该符号的其他用途,它也会改变它们。
您可能将不得不在您想要的页面上内联SVG。而不是使用符号。
为了让我们不用猜测,我们需要查看SVG – LGSon
您必须编写脚本。 –
我已经添加了一个片段(以某种方式工作)到您的问题。可能现在你可以澄清你的目标。 – vals