SVG 多边形学习笔记

SVG（Scalable Vector Graphics）可缩放矢量图形，它是一种基于 XML 格式的图像格式，通过使用 SVG，我们可以在网页上创建各种图形，包括多边形。在本次学习笔记中，我们将介绍如何使用 SVG 创建多边形，并且会提供一些实际的例子。

创建多边形

SVG 中的多边形通过 <polygon> 元素来创建，它有一个必需的属性叫做 points，用于定义多边形的顶点坐标。

下面是一个简单的多边形示例：

htmlCopy Code
<svg width="200" height="200">
  <polygon points="50,0 0,50 50,100 100,50" />
</svg>

这个多边形有 4 个顶点，分别在 (50,0)、(0,50)、(50,100) 和 (100,50) 这 4 个位置。

实例

五角星

下面是一个五角星的示例：

htmlCopy Code
<svg width="200" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198" />
</svg>

正方形

下面是一个正方形的示例：

htmlCopy Code
<svg width="200" height="200">
  <polygon points="50,50 150,50 150,150 50,150" />
</svg>

六边形

下面是一个六边形的示例：

htmlCopy Code
<svg width="200" height="200">
  <polygon points="100,10 180,70 180,130 100,190 20,130 20,70" />
</svg>

总结

通过本次学习笔记，我们了解了如何使用 SVG 创建多边形，并且提供了一些实例。多边形可以用来创建各种形状，例如五角星、正方形、六边形等，我们可以根据实际需要进行组合和调整，创造出更加复杂的图形。