某些CSS样式不适用于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 ?

Answer 1

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

Answer 2

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

Answer 3

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/

Answer 4

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