Question

我已经创建了一个三角形网格，如下所示：

    svg {
      margin-left: 0px;
      margin-right: -60px;
      padding: 0;
    }

<div data-bind="foreach: Grid">
  <div data-bind="foreach: $data.rowData">
    <!-- ko if: $data.owner() === 0 && ($data.pos[0] + $data.pos[1])%2 === 0-->
    <svg height="103.92" width="120">
      <polygon class="" points="60,0 0,103.92 120,103.92" style="fill:grey;" data-bind="click: $root.test.bind($data, $data)" />
    </svg>
    <!-- /ko -->
    <!-- ko if: $data.owner() === 0 && ($data.pos[0] + $data.pos[1])%2 === 1-->
    <svg height="103.92" width="120">
      <polygon class="" points="0,0 120,0 60,103.92" style="fill:grey;" data-bind="click: $root.test.bind($data, $data)" />
    </svg>
    <!-- /ko -->
  </div>
</div>

我的问题是只有三角形的左半部分是可点击的。我认为这是由于svg元素的（仍为矩形）形状。但我不知道如何解决这个问题。有没有办法让每个三角形在整个区域都可以点击？

Answer 1

目前，您所有单独的SVG彼此重叠，任何错过三角形的点击都会被父<svg>元素吞噬。

最干净的解决方案是将所有多边形放在一个大的SVG中。但是，使用pointer-events属性可以解决您的问题。

在pointer-events="none"元素上设置<svg>，以便点击次数通过它们。但是你还需要在你的多边形上设置一个明确的pointer-events="fill"，否则它们会继承＆＃34; none＆＃34;来自他们的父母SVG。

＆＃13;

var output = document.getElementById("output");
    
document.getElementById("red").addEventListener("click", function(e) {
  output.textContent = "red";
});

document.getElementById("green").addEventListener("click", function(e) {
  output.textContent = "green";
});

＆＃13;

svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

polygon {
    pointer-events: fill;
}

#output {
  margin-top: 120px;
}

＆＃13;

<svg width="100px" height="100px">
    <polygon points="0,0,100,0,100,100" fill="red" id="red"/>
</svg>

<svg width="100px" height="100px">
    <polygon points="0,0,100,100,0,100" fill="green" id="green"/>
</svg>

<div id="output"></div>

＆＃13;

Answer 2

你应该使用一个svg标签，里面有两个多边形。这样，Square svg元素不会相互重叠：

＆＃13;

polygon {
  fill: grey;
}
polygon:hover {
  fill: #000;
}

＆＃13;

<svg height="103.92" width="185">
  <polygon points="60,0 0,103.92 120,103.92" />
  <polygon points="65,0 185,0 125,103.92" />
</svg>

＆＃13;

如何使用html，svg创建可点击的三角形网格？

2 个答案: