Detecting click event on different paths in SVG

[HoodedRobin 0]

Hi,

I'm trying to develop a game in Phaser 3 where player is  able to select a stage (basically a scene) of their choice. I want this selection menu to be like a map.

This is how SVG file looks like.

<svg>

  <g>

   <path id="land" class="land" d="M138.114,402.543l0.683,1.604l-1.204.(truncated)">

   <path id="ice" class="ice" d="M238.114,402.543l0.683,1.604l-1.204...........">

   <path id="water" class="water" d="M538.114,402.543l0.683,1.604l-1.204........">

  </g>

</svg>

 

How do I add event to each of these path ?  They all are inside one svg file.  Normally, in vanilla JS we could select an element by id or class. 

If I load entire image at once using load.svg() adding event affects entire svg image. I can't tell which path was clicked. 

 

After more digging,  I thought of drawing the map using Phasers graphics.fillPoints(). That way I could have reference to each area I draw.

But again fillpoints expects arguments to be an array of Geom.Point  and SVG's path attribute has different format (d="M238.114,402.543l).  So, I can't do this either.

 

I appreciate any help or suggestions for achieving what I am trying to do.