svg - 创建 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>

或者，去掉笔划，您可以保留 View 框和坐标。除了使形状稍微变大之外，它没有在此处添加任何内容。