Can I have SVG polygon with edge interactions and fill

Question

I have a polygon with point coordinates. I want them as polygons with holes and each side of a polygon with different color.

I have the code for basic Polygon with same color for all edges . I need the polygon with different colored edges.Is that possible ??

.square {
  fill: none;
  stroke: black;
  stroke-width: 20;
}

    <svg width="300" height="300">
        <polygon class="square" points="20,20 290,20 290,130 20,130"></polygon>
    </svg>

Possible interactions should be first edge over the second, second edge over the first and the miter effect.

**

Can I achieve it with polygon , lines or paths? Valuable suggestions please.

**