创建SVG三角形

dagda1 发表于 Dev

dagda1

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

<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）处画线，但是三角形看起来不正确。

乔伊

三角形被描边，并且描边延伸到您提供的路径点之外（因为描边位于路径的中心）。这意味着笔触在图像的边缘被切除。尝试将图像放大一些，不要从（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>

或者，摆脱笔画，您可以保留视图框和坐标。除了使形状稍微变大以外，它在这里没有添加任何内容。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。