CODEWITHSUNDEEP
htmlcsssvgfill
George Welder
George Welder

Reputation: 4045

SVG / CSS - fill different paths with different colours

I have a svg with different paths, ellipses etc. They have different fill colours. Say red & blue. Now, I put them all into a sprite, and would now like to modify fill colour with css on hover, so what I would normally do is remove the fills from the svg and do everything with css' fill property.

However, since I have different colours here, I cannot simply do fill:red, since everything will be red, but I want some of it to be blue.

Upvotes: 0

Views: 4381

Answers (3)

Paul LeBeau
Paul LeBeau

Reputation: 101800

What you are doing can't work. Anything referenced via a <use> is not present in the DOM under the <use> element.

.icon:hover .outer { }

won't work because the path with class outer is not a descendant of .icon. If you want to style the contents of a symbol, you need to do it by applying the ruules directly to the symbol. For example:

#btn-tester .outer { }

Unfortunately :hover events don't apply to symbols. So you can't do:

#btn-tester:hover .outer { }

Even if that worked, you may not want to do that anyway. If there were any other uses of the symbol on the page, it would change them also.

You probably are going to have to just inline the SVG on the page where you want it. Instead of using a symbol.

Upvotes: 0

Gianno
Gianno

Reputation: 148

You can add a class to every path or you can use the nth-child.

Here is an easy example:

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

Upvotes: 0

Toby
Toby

Reputation: 13385

You can add a different class to each of the paths:

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

Then target those classes in your CSS:

.circleClass {
  fill: red;
}

Upvotes: 2

Related Questions