Question

i am working on a little game with an underlying hexgrid. For this I was recommended to use svg, because overlapping img have issues with correct mouseinteraction. Now I build a simple hexgrid with some polygons and added a little CSS for a hover-effect. But this does not work properly. It triggers not all the time and is very unsteady in the behaviour.
Basically it consists of:

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

And the CSS (extern file, linked into the site):

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

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

I put it into this jsfiddle:

http://jsfiddle.net/TZjDp/

If I remove the .tile in the CSS of the SVG, it works, but without I can’t adjust the colors and borders of the polygons. I am confused why it works without this section.

This is shown in this jsfiddle: http://jsfiddle.net/tf3fu/

What am I doing wrong?

Answer 1

The default for events is to only target where the object is drawn and your objects are unfilled. The pointer-events property can adjust this so that hover works whether or not a fill/stroke is set.

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

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