Show text on hover on polygon in SVG - HTML CSS SVG

HTML CSS examples for SVG:polygon

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

Description

Show text on hover on polygon in SVG

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.st0 {<!--from w  ww.  j a  va2  s.  c o  m-->
   fill: #0491B7;
}
.st1 {
   fill: #0491B7;
}
.st1:hover {
   fill: red;
   opacity: 0.5;
}
.st0:hover {
   fill: red;
}


      </style> 
 </head> 
 <body> 
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1139.833px" height="663.313px" viewbox="0 0 1139.833 663.313" style="enable-background:new 0 0 1139.833 663.313;" xml:space="preserve"> 
   <polygon class="st0" points="0,0.313 638,0.313 383,347.313 0,347.313 "> 
    <title>One</title> 
   </polygon> 
   <polygon class="st1" points="0,353.813 649,353.813 891.5,663.313 0,663.313 "> 
    <title>Two</title> 
   </polygon> 
   <polygon class="st0" points="392.5,347.313 514.75,179.813 645.25,347.313 "> 
    <title>Three</title> 
   </polygon> 
   <polyline class="st0" points="5.8,173.3 644.667,0.501 1139.833,0 1139.75,662.063 897.25,662.063"> 
    <title>Four</title> 
   </polyline> 
  </svg>  
 </body>
</html>

Related Tutorials