Pass ONLY clicks through a SVG with pointer-events - HTML CSS SVG

HTML CSS examples for SVG:polygon

  1. HOME
  2. HTML CSS
  3. SVG
  4. polygon

Description

Pass ONLY clicks through a SVG with pointer-events

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Transparent SVG for click</title> 
  <style>

body {<!--  w  w w  . j a  v a 2s .c  o  m-->
   margin: 0;
}
.wrapper {
   background-color: #e54d42;
   height: 100%;
   width: 100%;
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}
.link {
   cursor: pointer;
   color: #eee;
   font-family: Helvetica, Verdana;
   font-weight: 100;
   font-size: 40px;
}
.link:hover {
   color: #e59a95;
}
.mask {
   position: absolute;
   top: 0;
   width: 100%;
   right: 0;
}
.mask {
   pointer-events: none;
}
.svg-not-transparent {
   pointer-events: fill;
   cursor: pointer;
}
.svg-not-transparent:hover {
   fill: #333;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="wrapper"> 
   <a class="link"> this is a test</a> 
   <svg version="1.1" class="mask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 1980 1320" style="enable-background:new 0 0 1980 1320;" xml:space="preserve"> 
    <polygon class="svg-not-transparent" points="1277.7,0 567.8,1337.5 1980,1337.5 1980,0 " /> 
   </svg> 
  </div>  
 </body>
</html>

Related Tutorials