Some CSS styles not working on SVG

Question

I am working on this fiddle : https://jsfiddle.net/thatOneGuy/x2pxx92e/6/

I have this code for mouseover and out events :

d3.select('#circleSVG').on('mouseover', function(d) {
  console.log('mouseover')

  d3.select(this).classed('testCircle', true)
  console.log(this)
}).on('mouseout', function(){

  d3.select(this).classed('testCircle', false)
})

The testCircle class looks like so :

.testCircle{
  fill: orange;
  opacity:0.25;
}

But the only style that gets brought through on this class is the opacity. It doesn't change the fill. Any idea why ?

@lamelemon legend, been trying to figure it out for a while, thank you — thatOneGuy, Oct 17 '16 at 13:40
@lamelemon there is no need to use !important, it's a really bad practice — sandrina-p, Oct 17 '16 at 13:47

score 3 · Accepted Answer · answered Oct 17 '16 at 13:40

3

Specificity

The ID has a higher specifity that the class.

Just make the selector more specific. important is not recommended.

#circleSVG {
  fill: red;
  stroke: green;
}

#circleSVG.testCircle{
  fill: orange;
  opacity:0.25;
}

JSfiddle

answered Oct 17 '16 at 13:40

Paulie_D

107,962
13
142
161

Can you tell me how come it's not recommended ? In my actual offline code there is no id I can use as there are hundreds of nodes so I just use classes ? – thatOneGuy Oct 17 '16 at 13:42
2

`Important` should only be used as an absolute last resort. Once applied it's almost impossible to override **again** – Paulie_D Oct 17 '16 at 13:43
ok thank you, I'll do some more research. I think in my case it should be okay :) – thatOneGuy Oct 17 '16 at 13:44
1

@thatOneGuy [here's](http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css) a good answer on the implications of important. – Steven B. Oct 17 '16 at 13:44

score 2 · Answer 2 · answered Oct 17 '16 at 13:39

The problem is basically how the CSS selectors works.

Basically an id selector (#) is more specific than a class selector (.). So the "fill: orange" property in the class selector (.testCircle) is not being applied because the id selector (#testCircle) is more specific and also have a fill property. On the other hand, the opacity property is working because the id selector doesn't specify that property.

To fix this you can add "!important" as follow:

.testCircle{
  fill: orange !important;
  opacity:0.25;
}

Or even better, make your selector more specific:

#circleSVG.testCircle{
   fill: orange !important;
   opacity:0.25;
}

score 1 · Answer 3 · answered Oct 17 '16 at 13:48

1

Why do you use JS to accomplish that? You can use only css.

#circleSVG {
  fill: red;
  stroke: green;
}

#circleSVG:hover {
  fill: orange;
  opacity: 0.25;
}

https://jsfiddle.net/x2pxx92e/11/

answered Oct 17 '16 at 13:48

sandrina-p

3,794
8
32
60

Sorry should have said, my offline version needs a click event not a hover – thatOneGuy Oct 17 '16 at 14:49

score 0 · Answer 4 · answered Oct 17 '16 at 13:57

You are looking to change a class, but you also have an ID to define the svg color, so it's better to change the color of the ID when it's hover:

#circleSVG:hover{
  fill: orange;
  opacity:0.25;
}

To change the color by the ID, you can use

element = document.getElementById(id);

Some CSS styles not working on SVG

4 Answers4

Specificity