Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Why HTML SVG hexagon onClick "hitbox" being rectangular?

Tags:

javascript

html

reactjs

svg

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:

<div className={`land${getClassNames(landState)}`}>
<svg
  viewBox="0 0 100 100"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"    
>
  <polygon points="50 1 95 25 95 75 50 99 5 75 5 25"
  onClick={() => handleClick(index, selectLand, landState)} />
</svg>

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.

enter image description here

.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:**<br>
<div id="root"><div class="App"><div class="board"><div class="land-row three"><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div></div><div class="land-row four"><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isOccupiedByPlayer1"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div></div><div class="land-row"><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div></div><div class="land-row four"><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isOccupiedByPlayer1"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div></div><div class="land-row three"><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isOccupiedByPlayer2"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div></div></div></div></div>
like image 644
Boubou Avatar asked Oct 29 '25 08:10

Boubou

2 Answers

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:

enter image description here

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.';
};
<svg width="150" height="150" viewBox="0 0 100 100" style="background:#048">
    <polygon points="50 1 95 25 95 75 50 99 5 75 5 25"/>
    <circle cx="50" cy="50" r="30" fill="green"/>
</svg>
<div id="state"></div>

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:

enter image description here

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;
}
<div id="root">
<div class="App">
<div class="board">

<div class="land-row three">
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
</div>
<div class="land-row four">
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
    <div class="land isOccupiedByPlayer1">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
</div>
<div class="land-row">
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
</div>
<div class="land-row four">
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
    <div class="land isOccupiedByPlayer1">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
</div>
<div class="land-row three">
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
    <div class="land isActive isVacant">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
    <div class="land isOccupiedByPlayer2">
        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
    </div>
</div>
like image 140
Bharata Avatar answered Oct 31 '25 00:10

Bharata

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

<svg viewBox="0 0 100 100">
      <polygon points="50 1 95 25 95 75 50 99 5 75 5 25"
          onclick="console.log('You have clicked the polygon.')" />
</svg>

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;
}
<div id="root">
  <div class="App">
    <div class="board">
      <div class="land-row three">
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
      </div>
      <div class="land-row four">
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
        <div class="land isOccupiedByPlayer1"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
      </div>
      <div class="land-row">
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
      </div>
      <div class="land-row four">
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
        <div class="land isOccupiedByPlayer1"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
      </div>
      <div class="land-row three">
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
        <div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
        <div class="land isOccupiedByPlayer2"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
      </div>
    </div>
  </div>
</div>
like image 22
ksav Avatar answered Oct 30 '25 23:10

ksav
Sign in to Comment

Related questions

SyntaxError: [stdin]:6:2: unexpected {
Set tag value on select2
How to get notification if someone posts on linkedin. Is there any webhook APIs linkedIn provides
How do I promisify my own function?
How do I print roman languages (e.g. Spanish) /special characters in Javascript?
How to preventDefault and override browser's back button behavior?
How to send data from javascript function to Django View
Setting an env var in package.json for use with electron-reload?
How to format a JavaScript date object using Intl.DateTimeFormat
How to style a phone number input in React?
Using a html.validationmessagefor for a client side error message
getCurrentPosition fails behind VPN - why?
How to cache image rasterized
What happens for an useEffect with no second argument or one equal to null or undefined?
How can I insert a line break , render html for text in VUE?
How do I run a jQuery function when any link (a) on my site is clicked

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!