javascript - 为什么 HTML SVG 六边形 onClick "hitbox"是矩形的？

Question

我正在尝试仅使用 HTML 和 CSS 绘制由六边形组成的板。
这是一个 react 应用程序。
我的问题是这些六边形的“hitbox”是矩形的。有没有办法让我的onClick hitbox 完全适合我的六边形？
React.JS 代码:

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

编辑:
搬家 onClick在 polygone给了我一个更好的结果，但仍然不完美和奇怪。我在下图中突出显示了不可点击的区域。我不明白这一点。

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

Answer 1

所有 SVG 元素都不是矩形的。还有你的六边形polygon也不是矩形的。在我下面的演示中，您将看到它。在我的演示的以下屏幕截图中:

你可以看到一些黄色和红色的点。如果您在我的演示中单击这些点(区域)(但不是在屏幕截图上!)，那么您将看到这些元素不是矩形的。
互动演示

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>

更新
现在你已经添加了 HTML 代码，我们可以看到你的问题:你有每个 polygon第一个 SVG 元素位于 div 中元素。在开发人员 View 中，它看起来像这个屏幕截图:

您的 polygon元素不是矩形，但它在 div 内部来自类 land 的元素.要解决此问题，您可以从 div.land 停用鼠标事件。与 .board .land{pointer-events: none}并且因为现在来自完整 div 的鼠标事件元素(包括带有 polygon 的 SVG)已停用，您必须为 polygon 激活鼠标事件 .board polygon{pointer-events: all} 的元素.在添加这个 CSS 之后，它就可以工作了。

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>