我可以将SVG多边形与边缘进行交互并填充吗

Question

我有一个带点坐标的多边形。 我希望它们是带有孔的多边形，并且多边形的每一面都具有不同的颜色。

我有基本多边形的代码，所有边缘的颜色相同。我需要具有不同颜色边缘的多边形。可能吗？

.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>

可能的相互作用应该是第二个边缘位于第一个边缘，第二个边缘位于第一个边缘，并且具有斜接效果。

**

我可以使用多边形，直线或路径来实现吗？宝贵的建议     请。

**