Solution 1 :

You’d need to change the order of the polygons i.e using appendChild:

function myFunction() { = "#fc0303";


Problem :

I’m trying to highlight a specific polygon inside a SVG, by changing its stroke color.

Unfortunately, one side is completely covered by the second polygon’s stroke.

I have tried to bring it to the front with z index, but no luck.

<button id="b1" type="button">1st</button>
<svg viewBox="0 0 1240 1000">
    <polygon class="map__1" id="pol1" points="106.75,266 4,266 4,135 106.75,135 106.75,266" data-id="1">
    <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>


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

btn1.addEventListener("click", myFunction);

function myFunction() { = "#fc0303";


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

Here’s the fiddle:

I also tried with the outline property, but it doesn’t fits on other kind of polygons but squares.

Is there any way that I could manage to do this?



Comment posted by

z-index won’t work in SVG. Instead you can append the element in javascript using