SVG hover / click test

by whelkaholism

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 0 14 7">
  <g id="pg">
    <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"/>  
  </g>
</svg>

CSS

#pg:hover {
  opacity: 0.5;
}

JavaScript

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