我们可以有一条带有笔触，填充和笔触宽度的SVG线吗

Question

我输入了坐标和给定的形状，请参见以下代码。 它通过坐标给出形状的轮廓。

 <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图像

Answer 1

如果将多边形和直线方法结合使用，则可以获得合理的结果。

• 在后面放一个黑色的<polygon>其中包含所有线条。
• 每<line>分别有一个<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>