Why HTML SVG hexagon onClick "hitbox" being rectangular?

Question

I am trying to draw a board composed with hexagons using only HTML and CSS. It's a React app.

My problem is with the "hitbox" of these hexagons being rectangular. Is there a way to have my onClick hitbox to perfectly fit my hexagons?

React.JS code:

CSS

.land {
  float: left;
  margin-left: -5px;
  margin-bottom: -32px;
  width: 140px;
}
.land svg {
  width: 100%;
}
.land.isVacant svg {
  fill : #e0e0e0;
}
.land.isOccupiedByPlayer1 svg {
  fill : #90caf9;
}
.land.isOccupiedByPlayer2 svg {
  fill : #ef9a9a;
}
.active svg:hover {
  cursor: pointer;
}

EDIT:
Moving the onClick on the polygone gave me a beter result, but still not perfect and strange. I highlighted the unclickable zone on the following image. I don't understant this.

.board {
    float: left; width: 1200px;
}

.land-row {
    clear: left;
}
.land-row.three {
    margin-left: 135px;
}
.land-row.four {
    margin-left: 67px;
}
.land {
    float: left;
    margin-left: -5px;
    margin-bottom: -32px;
    width: 140px;
}

.land svg {
    width: 100%;
    height: 100%;
}

.land.isVacant svg {
    fill : #e0e0e0;
}

.land.isOccupiedByPlayer1 svg {
    fill : #90caf9;
}

.land.isOccupiedByPlayer2 svg {
    fill : #ef9a9a;
}

.active svg:hover {
    cursor: pointer;
}



**EDIT:**

user_5385381 · Answer

What you are describing should be the default for click handlers attached to an SVG shape.

Update. Here is the same thing with your updated code, and some pointer-events properties added to the svgs, polygons and divs.

document.querySelectorAll('polygon').forEach(polygon => {
  polygon.addEventListener('click', e => {
    e.target.closest('.land').classList.add('isOccupiedByPlayer1')
  })
})

.board {
  float: left;
  width: 1200px;
}

.land-row {
  clear: left;
}

.land-row.three {
  margin-left: 135px;
}

.land-row.four {
  margin-left: 67px;
}

.land {
  float: left;
  margin-left: -5px;
  margin-bottom: -32px;
  width: 140px;
}

.land svg {
  width: 100%;
  height: 100%;
}

.land.isVacant svg {
  fill: #e0e0e0;
}

.land.isOccupiedByPlayer1 svg {
  fill: #90caf9;
}

.land.isOccupiedByPlayer2 svg {
  fill: #ef9a9a;
}

.active svg:hover {
  cursor: pointer;
}

div,
svg {
  pointer-events: none;
}

polygon {
  pointer-events: fill;
}

user_9801830 · Answer

All SVG elements are not rectangular. And your hexagon polygon is also not rectangular. In my demo below you will see it. On the following screenshot of my demo:

you can see some yellow and red points. If you click on this points (areas) in my demo (but not on screenshot!) then you will see that this elements are not rectangular.

Interactive demo

document.querySelector('svg').onclick = function(e)
{
    if(e.target.tagName == 'polygon')
        state.innerText = 'Congratulation! You clicked on polygon element.';
    else if(e.target.tagName == 'circle')
        state.innerText = 'You clicked on circle element.';
    else
        state.innerText = 'Bad result! You clicked on SVG, but NOT on polygon element.';
};

UPDATE

Now you have added the HTML code and we can see your problem: you have for each polygon element one SVG wich is inside the div element. In the developer view it looks like on this screenshot:

Your polygon element is not rectangular, but it is inside the div element from class land. To solve this issue you can deactivate mouse events from div.land with .board .land{pointer-events: none} and because now mouse events from full div element (inclusive SVG with polygon) are deactivated you have to activate mouse events for polygon elements with .board polygon{pointer-events: all}. And after this CSS adding it works.

document.querySelector('.board').onclick = function(e)
{
    if(e.target.tagName == 'polygon')
    {
        var parentDivCL = e.target.closest('.land').classList;
        if(parentDivCL.contains('isVacant'))
        {
            parentDivCL.remove('isActive', 'isVacant');
            parentDivCL.add('isOccupiedByPlayer1');
        }
    }
};

.board .land{pointer-events: none}
.board polygon{pointer-events: all}

.board {
    float: left; width: 1200px;
}

.land-row {
    clear: left;
}
.land-row.three {
    margin-left: 135px;
}
.land-row.four {
    margin-left: 67px;
}
.land {
    float: left;
    margin-left: -5px;
    margin-bottom: -32px;
    width: 140px;
}

.land svg {
    width: 100%;
    height: 100%;
}

.land.isVacant svg {
    fill : #e0e0e0;
}

.land.isOccupiedByPlayer1 svg {
    fill : #90caf9;
}

.land.isOccupiedByPlayer2 svg {
    fill : #ef9a9a;
}

.active svg:hover {
    cursor: pointer;
}

Why HTML SVG hexagon onClick "hitbox" being rectangular?

2 Answers

Interactive demo

UPDATE