1

我正在开发一个带有底层 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 ，它可以工作，但如果没有，我将无法调整多边形的颜色和边框。我很困惑为什么没有这个部分它可以工作。

这显示在这个 jsfiddle 中：http: //jsfiddle.net/tf3fu/

我究竟做错了什么？

4

1 回答 1

3

事件的默认设置是仅针对绘制对象且未填充对象的位置。pointer-events属性可以对此进行调整，以便无论是否设置了填充/描边，悬停都可以工作。

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

.tile:hover{
    stroke: #808080;
    fill:red;
    pointer-events: visible;
}
于 2012-11-14T22:22:15.033 回答