2015-01-22 2 views
0

SVG에서 여러 경로를 제어하는 ​​마우스 오버 이벤트를 어떻게 만들 수 있는지 알아 내려고 노력했습니다. 미국의지도에서 알래스카, 하와이, 미시간은 다중 경로가 포함 된 그룹화 된 요소입니다. 나는 CSS를 사용하여 호버 (hover) 이벤트를 추가 할 수 있었지만 그룹화 된 요소로 상태를 가리키면 변경 사항 위에 마우스를 올려 놓는 경로 만 나타납니다. 내가 그들 위에 마우스를 가져 가면 적절한 그룹 상태의 모든 경로를 마치 단일 경로처럼 변경할 수 있기를 바랍니다.SVG의 여러 경로에 호버 이벤트를 추가하려면 어떻게해야합니까? IE9에서 작동합니까?

CSS를 사용하여 내가 찾고있는 응집력을 허용하지 않는 것처럼 보입니다. 어쩌면 jQuery? jQuery 솔루션을 검색했지만 어딘가에서 jQuery가 SVG 내부에서 잘 작동하지 않는다는 것을 읽습니다. SMIL을 사용해 보았지만 IE9에서는 잘 작동하지 않는 것 같습니다.

누군가가 IE9 및 최신 Chrome, Safari 및 Firefox 브라우저에서 작동 할 솔루션을 제안 할 수 있습니까?

SVG 파일은 아래에 링크되어 있습니다. 당신이 제공 할 수있는 모든 도움이 크게 감사하겠습니다. 고맙습니다.

http://sample.charlesjoyner.com/20150121-usa-map.svg

답변

0

알래스카는 <g>에 있기 때문에 당신이 그에게 호버을 적용 할 수 있습니다 ...

#Alaska:hover{fill-opacity:0.1; cursor:pointer;} 
+0

당신에게 로버트 감사! 이것은 내가 찾고 있었던 바로 그 것이다. – Charles

관련 문제