SVG hover / click test

by whelkaholism

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 0 14 7">
  <path id="p1" d="m 12 9 l -8 -2 l 7 -4 z" fill="#3fa3f5"/>
  <path id="p2" d="m 15 3 l -8 -2 l 7 -4 l 3 -1 l -2 7 z" fill="#f5a3f5"/>  
</svg>

CSS

#p1:hover, #p2:hover {
  opacity: 0.5;
}

JavaScript

jQuery(function($){
$('#p1').on('click', function() { alert('P1 clicked!')});
$('#p2').on('click', function() { alert('P2 clicked!')});
});