How to use html svg to Create a Clickable Triangle Mesh

Sarmad Gardezi

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>

More great articles

Add breadcrumbs in html and Static website

Breadcrumb is the additional navigational structure used to help the users navigate to the up level of the site easily…

Read Story

How to Disable Jetpack image Sitemaps from WordPress

Sitemaps are files that list each post and page that should be indexed by search engines like Google or Bing.…

Read Story

Facebook live Chat Widget for Websites & Blogs

Everyone now a days uses Facebook for different purposes like brand pages some personal blog pages , some company pages with…

Read Story
Arrow-up