How to use html svg to Create a Clickable Triangle Mesh

Written by Sarmad Gardezi February 1, 2020

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-eventscan 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)" />
    <!-- /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)" />
    <!-- /ko -->

Subscribe to my Email Newsletter

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

çanakkale escortdiyarbakır escortbursa escortkonya escortkonya escortbattalgazi escortmalatya escortantalya escortantalya escort