我输入了坐标和给定的形状，请参见以下代码。它通过坐标给出形状的轮廓。
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:transparent;stroke:purple;stroke-width:1" />
</svg>我可以将多边形的边线形为条形吗？它们看起来应该像是单独的线或路径，并且每条线都有不同的颜色，笔触和笔触宽度。我在下面的代码段中尝试过，但我只是得到一个笔触而不是填充。我需要一个黑色的笔触和填充颜色。
<svg height="210" width="500">
<line x1="200" y1="10" x2="250" y2="190" stroke-linejoin="square" stroke-linecap="square" stroke="black" fill="red" stroke-width="6"></line>
<line x1="250" y1="190" x2="160" y2="210" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="6" fill="green"></line>
<line x1="160" y1="210" x2="200" y2="10" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="6" fill="blue"></line>
</svg>**包含多边形和直线的代码**
<svg height="500" width="500">
<polygon points="200,10 250,190 160,210" style="fill:transparent;stroke:purple;stroke-width:1" />
<line x1="200" y1="10" x2="250" y2="190" stroke-linejoin="square" stroke-linecap="square" stroke="black" fill="red" stroke-width="16"></line>
<line x1="200" y1="10" x2="250" y2="190" stroke-linejoin="square" stroke-linecap="square" stroke="red" fill="red" stroke-width="8"></line>
<line x1="250" y1="190" x2="160" y2="210" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="16" fill="green"></line>
<line x1="250" y1="190" x2="160" y2="210" stroke-linejoin="square" stroke-linecap="square" stroke="blue" stroke-width="8" fill="green"></line>
<line x1="160" y1="210" x2="200" y2="10" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="16" fill="blue"></line>
<line x1="160" y1="210" x2="200" y2="10" stroke-linejoin="square" stroke-linecap="square" stroke="green" stroke-width="8" fill="blue"></line>
</svg>**
**更新：如果我删除一条线以使其一条边没有填充而仅笔触，则看不到它。我要中风。只需触摸结尾即可。请参见下面的代码。**
<svg height="500" width="500">
<polygon points="200,10 250,190 160,210" style="fill:transparent;stroke:purple;stroke-width:1" />
<line x1="200" y1="10" x2="250" y2="190" stroke-linejoin="square" stroke-linecap="square" stroke="black" fill="red" stroke-width="1"></line>
<line x1="250" y1="190" x2="160" y2="210" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="16" fill="green"></line>
<line x1="250" y1="190" x2="160" y2="210" stroke-linejoin="square" stroke-linecap="square" stroke="blue" stroke-width="8" fill="green"></line>
<line x1="160" y1="210" x2="200" y2="10" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="16" fill="blue"></line>
<line x1="160" y1="210" x2="200" y2="10" stroke-linejoin="square" stroke-linecap="square" stroke="green" stroke-width="8" fill="blue"></line>
</svg>下图：
O/P image
最佳答案
如果将多边形和直线方法结合使用，则可以获得合理的结果。
在后面放一个黑色的<polygon>，其中包含所有行。
每行分别使用一个<line>来给出单独的颜色。它们的笔划宽度比多边形小。
如果将多边形设置为使用圆角线连接，并且将线设置为具有圆形端盖，则将有助于伪装角部的丑陋。
如果您需要更整洁的斜角，那么它会变得更加复杂。您将不得不自己切换到定义线条的轮廓。例如，通过使三条线中的每条线都填充为梯形形状。
<svg height="500" width="500">
<polygon points="200,10 250,190 160,210" stroke-linejoin="round" stroke="black" fill="none" stroke-width="16" />
<line x1="200" y1="10" x2="250" y2="190" stroke-linecap="round" stroke="red" fill="none" stroke-width="10"/>
<line x1="250" y1="190" x2="160" y2="210" stroke-linecap="round" stroke="green" fill="none" stroke-width="10"/>
<line x1="160" y1="210" x2="200" y2="10" stroke-linecap="round" stroke="blue" fill="none" stroke-width="10"/>
</svg>