SVG hexgrid：懸停無法正常工作

Question

我正在使用基礎hexgrid進行小遊戲。爲此，我被推薦使用svg，因爲重疊img有正確的鼠標交互問題。現在我用一些多邊形構建一個簡單的六邊形網格，並添加一點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（EXTERN文件，鏈接到網站）：

... 
.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; 
}