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> 

하지만 첫 번째 두 개의 원이 (사파리와 오페라에) 가져가시 주황색으로하지 않습니다를 시도했다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

채우기는 보류 된 <g>에 설정되지만 다른 선택기는 원의 채우기보다 우선합니다.

은 교체 :

.A:hover {fill: orange} 

으로 :

.A:hover * {fill: orange} 

는 fiddle를 참조하십시오.