How to use html svg to Create a Clickable Triangle Mesh

I have built a triangle mesh like this it will help you to use html svg to Create a Clickable Triangle Mesh.

At the moment, all of your individual SVG overlap each other, and any miss triangular click the parent will be<svg>swallowed. element.

The cleanest solution is to put all the polygons in a big SVG. However, usepointer-eventscan solve your problem properties.

Setpointer-events="none" in your<svg>on elements to click through them. However, you also need to set a definitepointer-events="fill" on your polygon, or they inherit from its parent SVG “no.”

The JS Function i used to fetch the program

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

CSS file we will use

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

HTML code

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