离子根据选择动态填充SVG

Question

我的离子应用程序中有一个svg贴图，也有一个选择按钮来选择地区。当我选择一个时，我需要填写多个相关的svg部分。如何实现？

这是我的svg地图代码

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.429 437.699">
  <defs>
    <style>
      .cls-1, .cls-2, .cls-3 {
        fill: none;
        stroke: #2bd17b;
      }

      #Kandy{
        fill: #2bd17b;
      }


      #Matara{
        fill: #2bd17b;
      }

      .cls-1, .cls-3 {
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .cls-1, .cls-2 {
        fill-rule: evenodd;
      }
    </style>
  </defs>
<g id="Sri_Lanka" data-name="Sri Lanka" transform="translate(0.375 276.373)">
    <path id="Kandy"  class="cls-1" d="M115.848-109.977l.972,1"></path>
    <path id="Matara"  class="cls-1" d="M115.848-109.977l.972,1"></path>
    <path id="Galle"  class="cls-1" d="M115.848-109.977l.972,1"></path>
    <path id="Colombo"  class="cls-1" d="M115.848-109.977l.972,1"></path>
    ........
<g/
</svg>