Можно ли выбрать элемент на SVG картинке?

$('.shape').click(function(e) { 
  e.preventDefault(); 
  mthis = $(this); 
  if ($(this).hasClass('selected')) { 
    $(this).removeClass('selected'); 
  } else { 
    $(this).addClass('selected'); 
  } 
});

.container { 
  position: relative; 
} 
 
.container img, .container svg { 
  -khtml-user-select: none; 
  -o-user-select: none; 
  -moz-user-select: none; 
  -webkit-user-select: none; 
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
  user-select: none; 
  position: absolute; 
  top: 0; 
  left: 0; 
} 
 
.container svg .shape { 
  fill: rgb(0,0,255); 
  stroke: rgb(0,0,0); 
  fill-opacity: 0; 
  stroke-width: 2; 
} 
 
.container svg .shape.selected { 
  fill-opacity: 0.5; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
<div class="container"> 
 
  <img class="hotspot" src="https://66.media.tumblr.com/ec8bb434b97ed2e02a56579ca1606a53/tumblr_o09d7vVOI01qhy6c9o1_500.gif" width="500" height="500" alt="Pusheen"> 
 
  <svg width="500" height="500"> 
  <rect class="shape" x="55" y="88" width="172" height="237" /> 
  <circle class="shape" cx="249" cy="362" r="97" style="fill:rgb(0,0,255);stroke:rgb(0,0,0)"  /> 
  <polygon class="shape" points="334,143,332,157,347,169,365,166,366,182,407,210,414,243,409,265,384,288,341,284,303,263,279,241,259,214,265,186,284,161,308,146" style="fill:rgb(0,0,255);stroke:rgb(0,0,0)" /> 
</svg> 
 
  <map name="pusheenmap"> 
  <area coords="55,88,227,325" shape="rect" href="#"> 
  <area coords="249,362,97" shape="circle" href="#"> 
  <area coords="334,143,332,157,347,169,365,166,366,182,407,210,414,243,409,265,384,288,341,284,303,263,279,241,259,214,265,186,284,161,308,146" shape="poly" href="#"> 
</map> 
 
</div>