SVG многоугольник не может выделить

Question

Я пытаюсь выделить определенный c полигон внутри SVG, изменив его цвет обводки.

К сожалению, одна сторона полностью покрыта мазком второго многоугольника.

Я пытался вывести его на фронт с индексом z, но безуспешно.

<button id="b1" type="button">1st</button>
<svg viewBox="0 0 1240 1000">
  <g>
    <polygon class="map__1" id="pol1" points="106.75,266 4,266 4,135 106.75,135 106.75,266" data-id="1">
    </polygon>
    <polygon class="map__2" points="178.25,168.655 106.75,240 106.75,135 145.75,135 178.25,168.655" data-id="2"></polygon>
  </g>
</svg>

js

let btn1 = document.getElementById("b1");
let pol1 = document.getElementById("pol1");

btn1.addEventListener("click", myFunction);

function myFunction() {
    pol1.style.stroke = "#fc0303";
}

css

.map__1, .map__2 {
  stroke: #000;
  stroke-width: 5px;
  stroke-miterlimit: 10;
  fill: #6e6e6e;
}

Вот скрипка: https://jsfiddle.net/tfzbjxL3/

Я также попробовал наброски свойство, но оно не подходит для других видов многоугольников, кроме квадратов.

Можно ли как-нибудь это сделать?

Спасибо!

Answer 1

Вам необходимо изменить порядок многоугольников, например, используя appendChild:

function myFunction() {
  pol1.style.stroke = "#fc0303";
  pol1.parentNode.appendChild(pol1);
}

JSFiddle