Состояние активного класса с картой SVG

Question

У меня есть карта SVG и я хотел бы оставить активное состояние, и когда я нажимаю на другое состояние, он добавляет активный класс, но я не знаю, как это сделать. У меня есть код, который я сделал, но не работает, какую функцию я могу использовать? следуй моему коду

style.css

#svg-map path {fill:#c3c4c9; }
#svg-map a:hover { cursor:pointer; text-decoration:none }
#svg-map a:hover path{ fill:#e00109 !important }
#svg-map a:focus{ fill:#a5a4aa !important }
#svg-map a:active path{ fill:#e00109 !important; }
#svg-map{
    a{
      path{
        @include transition-property(opacity);
        @include transition-duration(.5s);
        @include transition-timing-function(ease);
      }
      &:hover,
      &:focus{
        cursor: pointer;
        path{
          opacity: 0.25;
        }
      }
   }
 }

.parana path {
 fill:#a5a4aa !important;
}
.santacatarina path {
 fill:#a5a4aa !important;
}
.riograndedosul path {
 fill:#a5a4aa !important;
}
.matogrosso path {
 fill:#a5a4aa !important;
}
.representantes{
 display:none;
}

HTML

      <a  id="parana" class="button parana">
        <path stroke="#FFFFFF" stroke-width="1.0404" stroke-linecap="round" stroke-linejoin="round" d="M222.225,363.694
        c1.807-2.138,1.889-4.881,2.424-7.479c0.301-1.453,0.465-7.86,1.369-8.736c2.3-0.684,2.3-3.315,2.726-5.204
        c0.616-2.738,2.821-2.958,3.984-5.616c4.369-9.91,38.947-9.529,46.476-9.227c4.658,0.193,15.775,34.563,17.916,33.794
        c-1.728,2.19-5.754,8.929-8.41,8.984c-4.054,0.057-14.215,14.68-14.215,14.68s-37.329-12.05-40.287-11.285
        c-3.875-1.449-2.698-6.491-6.054-8.216C226.663,364.623,222.498,367.8,222.225,363.694z"></path>
      </a>
      <a  id="santacatarina" class="button santacatarina">
        <path stroke="#FFFFFF" stroke-width="1.0404" stroke-linecap="round" stroke-linejoin="round" d="M231.029,383.959
        c1.669-3.338-0.284-10.516,4.573-10.569c6.631-0.109,13.639,3.559,20.402,3.888c1.317,0.055,5.231,2.163,4.357-1.15
        c-1.095-4.164,3.945-1.863,5.67-3.179c2.274-1.724,8.187-4.106,11.311-1.367c1.423,1.809,20.05-5.395,13.284,3.946
        c-1.368,1.395,0.713,10.789,0.466,10.734c-3.449,4.438,1.726,11.666-5.096,15.334c-2.901,1.536-7.284,7.779-9.64,9.995
        C276.085,411.866,233.534,382.918,231.029,383.959z"></path>
      </a>