如何通过CSS设置SVG样式？

Question

我有这段代码：

#circleSVG {
 fill : red;
}

<svg>
  <g transform='translate(100,100)'>
    <circle id='#circleSVG' r='5'></circle>
  </g>
</svg>

JSFiddle：https://jsfiddle.net/thatOneGuy/x2pxx92e/

是否可以通过CSS设置圆圈的样式？而不是像这样内联（我正在使用D3）：

d3.select('#circleSVG').style('fill','red');

Answer 1

将id添加到您的圈子时出错了。它应该是id='circleSVG'，而不是id='#circleSVG'。

使用CSS，您可以使用#来表示id和.来表示一个类。

Answer 2

从ID中删除＃

＆＃13;

＆＃13;

/**
* essentially the same CSS just more precise.
**/
svg.foo-class>g>circle {
 fill : red;
}

＆＃13;

<svg class="foo-class">
    <g transform='translate(100,100)'>
        <circle id='circleSVG' r='5'></circle>
    </g>
</svg>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;