롤오버를위한 SVG에서 g id 지정하기

Question

Adobe Illustrator에서 출력 된 SVG 파일로 작업 중이므로 불필요한 코드가 꽤 있습니다. 검색과 검색 후에 나는 이것을 생각해 낼 수 있었다.

<?xml-stylesheet type="text/css" href="SVG_css.css"?> 

path:hover{ 
fill:#005289; 
} 

외부 스타일 시트에서 롤오버가 작동하지만 모든 경로를 롤오버로 타겟팅합니다.

예를 들어 그룹에서 경로를 타겟팅해야하므로 롤오버 할 때 세 요소가 강조 표시됩니다. 다음은 Illustrator의 코드 구조입니다.

<g id="WIRE_ROOM"> 
    <path fill="#BCBEC0" d="M357.3,24.4c0,0.6-0.6,1-1.4,1h-8.1c-0.8,0-1.4-0.5-1.4-1v-8.9c0-0.6,0.6-1,1.4-1h8.1c0.8,0,1.4,0.5,1.4,1 
     V24.4z"/> 
    <path fill="#BCBEC0" d="M357.3,51.4c0,0.6-0.6,1-1.4,1h-8.1c-0.8,0-1.4-0.5-1.4-1v-8.9c0-0.6,0.6-1,1.4-1h8.1c0.8,0,1.4,0.5,1.4,1 
     V51.4z"/> 
    <path fill="#BCBEC0" d="M376.7,24.4c0,0.6-0.6,1-1.4,1h-8.1c-0.8,0-1.4-0.5-1.4-1v-8.9c0-0.6,0.6-1,1.4-1h8.1c0.8,0,1.4,0.5,1.4,1 
     V24.4z"/> 
</g> 

내가 스타일 시트에 ID를 연결하는 시도했습니다, 그리고 운이 없었다 ... 나는 또한 SVG에 직접 클래스를 연결했습니다.

경로에 class = "locations"를 추가하면 당연히 요소 그룹이 아닌 해당 요소 만 롤오버합니다. 이런 수업을 추가 할 때 아무 일도 일어나지 않았습니다. g id = "WIRE_ROOM"class = "locations"

내가 시도한 모든 것을 검색하고 시도 했으므로 누군가 나를 도와 줄 수 있으면 고맙겠습니다.

"WIRE_ROOM"의 경우 장비의 종류가 다르므로 하나의 공통 영역을 나타 내기 위해 3 개의 영역 모두를 강조 표시해야합니다. 고맙습니다!

Answer 1

나중에 참조 할 수 있도록 선택자는 g#WIRE_ROOM:hover path 또는 g.locations:hover path입니다. ID 대신 클래스를 사용하는 것이 좋습니다. 자식 요소의 어떤이 과도하게 마우스를 갖다 댄 다음 선택이 모든 자식 경로로 가져가 스타일을 적용 할 때

는 그룹의 hover 상태가 트리거됩니다.

파일에서 패스 상에 채색 색상을 직접 설정했기 때문에 상속에 의존 할 수없는 선택기의 경로를 명시해야합니다. 상속 된 스타일보다 우선합니다.