---

SVG Polygon技术文档

简介

SVG（Scalable Vector Graphics）是一种用来描述矢量图形的XML标记语言，可用于创建图标、图形和交互式图像等多种场合。其中，<polygon> 标签用于定义一个多边形。多边形是一个闭合的形状，由三个或更多有序点定义，并按照顺序连接所有相邻的点。

语法

<polygon points="x1,y1 x2,y2 x3,y3 ..." />

其中， points 属性由一个空格分隔的一系列 x,y 坐标对组成。x,y 坐标对定义了多边形角落的位置。

下面是一个简单的示例：

<svg width="150" height="150">
  <polygon points="20,20 20,120 120,120" />
</svg>

这个示例定义了一个从 (20,20) 开始，经过 (20,120) 和 (120,120) 三个点组成的三角形。其效果如下图所示：

可以通过添加更多点坐标来创建更复杂的形状。例如，下面这个示例创建一个五边形：

<svg width="150" height="150">
  <polygon points="75,5 141,53 107,137 43,137 9,53" />
</svg>

其效果如下图所示：

属性

<polygon> 元素支持以下属性：

• points ：定义形状的角落坐标。如前所述，这是唯一必填属性。
• fill ：规定填充颜色，可以为颜色名称、RGB值、十六进制等格式。
• stroke ：定义轮廓的颜色，同样可以为颜色名、RGB值、十六进制等格式。
• stroke-width ：定义轮廓的宽度大小。
• stroke-linejoin ：定义轮廓线条之间的连接方式。可选的值为 “miter” （斜接）、“round” （圆接）和 “bevel” （折角）。
• stroke-dasharray ：定义虚线的绘制方式。该属性由一些逗号分隔的数字组成，每个数字表示虚线长度和实线长度的交替。

例子

接下来我们来看几个更加复杂的多边形例子：

矩形

矩形是最简单的多边形，由四个顶点组成。下面这个示例创建了一个带有蓝色填充和红色边框的矩形。

<svg width="150" height="150">
  <polygon points="20,20 120,20 120,120 20,120" 
           fill="#0080FF" stroke="#FF0000" stroke-width="4"/>
</svg>

其效果如下图所示：

正六边形

下面这个示例创建了一个正六边形，它的正中央有一个橙色填充的小三角形。

<svg width="150" height="150">
  <polygon points="75,5 141,53 141,117 75,165 9,117 9,53" 
           fill="#FFFFFF" stroke="#444" stroke-width="2"/>
  <polygon points="75,48 92,85 58,85" fill="#FFA500" />
</svg>

其效果如下图所示：

不规则多边形

下面这个示例创建了一个不规则多边形，有一个渐变色的填充。为了让边框看起来更加圆润，同时增加视觉深度，我们将其设为圆角。

<svg width="150" height="150">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color: #FBBD11; stop-opacity: 1" />
      <stop offset="100%" style="stop-color: #F5511E; stop-opacity: 1" />
    </linearGradient>
  </defs>
  <polygon points="30,20 80,10 120,70 80,120 30,130" 
           fill="url(#grad)" stroke="#444" stroke-width="4" stroke-linejoin="round"/>
</svg>

其效果如下图所示：

总结

多边形是 SVG 交互式图形中最重要的形状之一，可以用于创建许多不同的图案和交互元素。掌握多边形的基本语法和属性是理解 SVG 基础的关键之一。