SVG hexgrid : 호버가 제대로 작동하지 않습니다.

Question

저는 기본 hexgrid로 약간의 게임을하고 있습니다. 이를 위해 svg를 사용하는 것이 좋습니다. img를 겹쳐 쓰면 올바른 마우스 상호 작용에 문제가 있기 때문입니다. 이제는 폴리곤이있는 간단한 hexgrid를 만들고 호버 - 효과를 위해 CSS를 약간 추가했습니다. 그러나 이것은 제대로 작동하지 않습니다. 그것은 모든 시간을 유발하지 않고 행동에서 매우 불안정합니다.

... 
<svg id="svggrid" class="grid" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <polygon points="25,43 75,43 100,86 75,129 25,129 0,86" class="tile"></polygon> 
    <polygon points="25,129 75,129 100,172 75,215 25,215 0,172" class="tile"></polygon> 
    <polygon points="25,215 75,215 100,258 75,301 25,301 0,258" class="tile"></polygon> 
    <polygon points="100,0 150,0 175,43 150,86 100,86 75,43" class="tile"></polygon> 
    <polygon points="100,86 150,86 175,129 150,172 100,172 75,129" class="tile"></polygon> 
    <polygon points="100,172 150,172 175,215 150,258 100,258 75,215" class="tile"></polygon> 
    <polygon points="175,43 225,43 250,86 225,129 175,129 150,86" class="tile"></polygon> 
    <polygon points="175,129 225,129 250,172 225,215 175,215 150,172" class="tile"></polygon> 
    <polygon points="175,215 225,215 250,258 225,301 175,301 150,258" class="tile"></polygon> 
</svg> 
... 

그리고 CSS (통근 파일, 사이트에 링크) :

... 
.tile{ 
    stroke: #000000; 
    fill:none; 
} 

.tile:hover{ 
    stroke: #808080; 
    fill:red; 
} 
... 

나는이 jsfiddle에 넣어 :

http://jsfiddle.net/TZjDp/

하면 은 기본적으로는 다음과 같이 구성 SVG의 CSS에서 .tile을 제거했지만 작동하지 않지만 폴리곤의 색상과 테두리를 조정할 수 없습니다. 이 섹션이 없으면 왜 작동하는지 혼란 스럽습니다. http://jsfiddle.net/tf3fu/

내가 잘못 뭐하는 거지 :

이

이 jsfiddle에 표시됩니다?

Answer 1

이벤트의 기본값은 오브젝트가 그려지는 곳과 오브젝트가 채워지지 않은 곳을 대상으로하는 것입니다. pointer-events 속성은 채우기/획이 설정되었는지 여부에 관계없이 마우스 오버가 작동하도록이 값을 조정할 수 있습니다.

.tile{ 
    stroke: #000000; 
    fill:none; 
    pointer-events: visible; 
} 

.tile:hover{ 
    stroke: #808080; 
    fill:red; 
    pointer-events: visible; 
}