HTML 请问有人能解释一下SVG polygon points吗

在本文中，我们将介绍SVG中的polygon元素以及其属性points的含义和用法。SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML语言，而polygon是SVG中用于绘制多边形的元素之一。

阅读更多：HTML 教程

什么是SVG polygon points？

SVG polygon points属性用于定义多边形的顶点坐标。它的值是一串用空格或逗号分隔的(x, y)坐标对，表示多边形的每个顶点的位置。每个坐标对中的x和y分别表示相应顶点的水平和垂直坐标。可以指定任意多个顶点来绘制不同形状的多边形。

SVG polygon points的用法

要使用SVG的polygon元素，并通过points属性定义多边形的顶点坐标，可以在SVG文件中按以下方式编写代码示例：

<svg width="200" height="200">
  <polygon points="100,50 150,50 150,100 125,120 100,100 75,120 50,100 50,50"
           stroke="black" stroke-width="2" fill="none" />
</svg>

在上面的示例中，我们创建了一个200×200像素的SVG画布，并在其中使用polygon元素绘制了一个八边形。polygon元素的points属性的值为一串顶点坐标，通过空格或逗号进行分隔。多边形的边框颜色为黑色，边框宽度为2像素，填充颜色为透明。

在SVG中，每一个顶点坐标都定义了一个点，相邻的顶点之间会自动连接起来形成多边形。在上面的示例中，我们通过指定八个顶点坐标来定义了这个八边形的形状。

顶点坐标的相对和绝对定位

SVG polygon points属性允许使用相对定位和绝对定位来定义顶点坐标。相对定位是相对于前一个顶点而言，而绝对定位则是相对于SVG画布的坐标系。

使用相对定位，可以通过在坐标值前加上”+/-“符号来指定相对于前一个顶点的偏移量。例如：

<svg width="200" height="200">
  <polygon points="100,50 50,50 -25,20 -25,60 0,40 25,60 25,20 0,0"
           stroke="black" stroke-width="2" fill="none" />
</svg>

在上面的示例中，我们通过相对定位来定义了一个八边形，每个顶点的坐标都是相对于前一个顶点的偏移量。这样可以更方便地调整多边形的形状。

如果想使用绝对定位来定义顶点坐标，可以直接指定相应的绝对坐标值，而不加任何符号。例如：

<svg width="200" height="200">
  <polygon points="100,50 150,50 175,70 175,110 150,130 125,110 125,70 150,50"
           stroke="black" stroke-width="2" fill="none" />
</svg>

在上面的示例中，我们通过绝对定位来定义了一个与之前示例中相同形状的八边形。每个顶点的坐标都是相对于SVG画布的坐标系而言的。这样可以精确地控制多边形的位置。