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, use pointer-events
can solve your problem properties.
Set pointer-events="none"
in your <svg>
on elements to click through them. However, you also need to set a definite pointer-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>