javascript - 某些CSS样式不适用于SVG

我正在研究这个小提琴：https://jsfiddle.net/thatOneGuy/x2pxx92e/6/

我有以下代码用于mouseover和out事件：

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

testCircle类看起来像这样：

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

但是，此类中唯一采用的样式是不透明度。它不会改变填充。知道为什么吗？

最佳答案

特异性
ID具有比类更高的特异性。
只是使选择器更具体。不建议使用important。

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

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

JSfiddle

关于javascript - 某些CSS样式不适用于SVG，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40087855/