使用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} 

見fiddle。