css - 使用 CSS 类对 SVG 组进行样式设置

Question

我想使用 CSS 突出显示 SVG 组。我试过下面的代码

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <style type="text/css">
    * {stroke: black; fill: white}
    .A:hover {fill: orange}
    .B:hover {fill: blue}
  </style>
  <g class="A">
    <circle cx="100" cy="100" r="50" />
    <circle cx="250" cy="100" r="50" />
  </g>
  <circle class="B" cx="400" cy="100" r="50" />
</svg>

但前两个圆圈在悬停时不会变成橙色（在 Safari 和 Opera 中）。我究竟做错了什么？

Answer 1

填充将设置在悬停的 上<g>，但另一个选择器会覆盖圆圈上的填充。

代替：

.A:hover {fill: orange}

和：

.A:hover * {fill: orange}

见小提琴。