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

Question

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

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

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

Answer 2

两者都可以创建形状。

多边形在绘制至少三个边后会自动为您关闭形状（通过返回第一个点），并且由一系列连接的直线组成，这意味着它不能很好地缩放。

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

来源