Javascript SVG多边形无法高亮显示

我试图通过改变笔划颜色来突出显示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>

css

这是小提琴：

我也尝试了outline属性，但它不适合其他类型的多边形，只适合正方形

我有什么办法可以做到这一点吗

---

谢谢

您需要更改多边形的顺序，即使用

appendChild

：

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

---

z-index在SVG中不起作用。相反，您可以使用

appendChild

在javascript中附加元素。请看一下这支笔：

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

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