创建SVG三角形

Question

我正在尝试创建一个等边三角形，您可以在此fiddle中看到：

<svg xmlns="http://www.w3.org/2000/svg"
     width="22"
     height="22"
     viewBox="0 0 22 22">
  <path d = "M0 0 L0 22 L20 11" stroke = "red" stroke-width = "3" fill = "red"/>
</svg>

我的想法是我把笔放在（0,0）然后画线到（20,11），但三角形看起来不正确。

Answer 1

您的三角形是描边，并且笔划超出了您提供的路径点（因为笔划位于路径的中心）。这意味着笔划会在图像边缘处被切断。尝试使图像更大，不要从（0,0）开始。此外，路径不是关闭，因此笔划仅覆盖三个边中的两个边（填充它时不需要关闭路径）。

以下内容应该更像您设想的三角形：

<svg xmlns="http://www.w3.org/2000/svg"
     width="28"
     height="28"
     viewBox="0 0 28 28">
  <path d = "M3 3 L3 25 L23 14 z" stroke = "red" stroke-width = "3" fill = "red"/>
</svg>

或者，摆脱笔划，您可以保留视图框和坐标。除了使形状略大一些之外，它不会在这里添加任何内容。