javascript - 我们可以有一个带有描边、填充和描边宽度的 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 image

Answer 1

如果结合多边形和线的方法，您可以获得合理的结果。

• 在后面放一个黑色的单<polygon>包含所有行。
• 还有一个<line>为每一行赋予个性化的颜色。它们的笔画宽度小于多边形。

如果您将多边形设置为使用圆形线连接，并将线设置为具有圆形端盖，这将有助于掩饰拐 Angular 处的丑陋。

如果您需要更整洁的斜 Angular ，那么它会变得更加复杂。您要么必须切换到自己定义线条的轮廓。例如，将三条线中的每条线都制成填充梯形。

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