SVG中路径与多边形绘制的多边形示例

【问题标题】：Examples of polygons drawn by path vs polygon in SVGSVG中路径与多边形绘制的多边形示例
【发布时间】：2021-11-04 16:39:58
【问题描述】：

我想学习 SVG，并试图了解如何使用点（带多边形）或通过路径（路径）动态呈现相同的图像。

我想要几个 SVG 多边形和 SVG 路径中的相同多边形（三角形、正方形和五边形就足够了）的示例，以便我可以比较代码。我可以找到任何一个绘制的单个图像，但没有一个是相同的。

【问题讨论】：

标签： svg

【解决方案1】：

这很简单：您基本上可以将多边形的points 属性转换为路径的d 属性，方法是在前面加上M 并附加z。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <polygon points="20,20 100,20 100,100 30,110"/>
  <path        d="M20,20 100,20 100,100 30,110z" fill="green" transform="translate(100,0)"/>
</svg>

【讨论】：

先生，您是救生员！
视觉比较 FTW。

【解决方案2】：

两者都可以创建形状。

多边形将自动关闭形状你（通过回到第一点）至少画了三个边，由一系列相连的直线组成，意味着它不能很好地扩展。

路径可以使用直线或曲线，并且不会自动关闭为你塑造。路径可能是最强大的基本形状元素在 SVG 中。

Source

【讨论】：