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>，以给出各自的颜色。它们的笔划宽度小于多边形。

如果将多边形设置为使用圆角线连接，并且将线设置为具有圆形端盖，则将有助于伪装角落的丑陋度。

如果您需要更整洁的斜角，那么它将变得更加复杂。您将不得不自己切换到定义线条的轮廓。例如，通过使三条线中的每条线都填充为梯形形状。

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

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

1 个答案: