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>