绘制多边形 polygon

详细介绍SVG多边形polygon元素的绑制方法，包括points属性、填充规则等设置。通过实际案例掌握多边形的各种用法，适合前端开发者学习SVG图形绑制。 多边形是由多个点连接而成的闭合路径。<polygon> 元素自动闭合路径，适合绑制三角形、五边形、星形等封闭图形。

基本语法

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

属性说明

• points：点坐标列表，用空格或逗号分隔

基本多边形

<polygon points="50,20 80,80 20,80" fill="#3498db"/>
<polygon points="150,20 180,50 170,80 130,80 120,50" fill="#e74c3c"/>
<polygon points="250,20 280,40 270,80 230,80 220,40" fill="#2ecc71"/>
<polygon points="350,20 370,50 360,90 340,90 330,50" fill="#f39c12"/>

自动闭合特性

多边形会自动将最后一个点连接到第一个点：

<polygon points="50,20 100,80 150,20" fill="#3498db" fill-opacity="0.5" stroke="#3498db" stroke-width="2"/>

常见多边形

三角形

<polygon points="50,20 80,80 20,80" fill="#3498db"/>
<polygon points="130,80 160,20 190,80" fill="#e74c3c"/>
<polygon points="250,50 280,20 310,50 280,80" fill="#2ecc71"/>
<polygon points="370,20 370,80 330,50" fill="#f39c12"/>

四边形

<polygon points="20,20 80,20 80,80 20,80" fill="#3498db"/>
<polygon points="120,50 150,20 180,50 150,80" fill="#e74c3c"/>
<polygon points="220,20 280,20 260,80 240,80" fill="#2ecc71"/>
<polygon points="320,20 380,50 320,80" fill="#f39c12"/>

五边形和六边形

<polygon points="60,20 90,40 80,75 40,75 30,40" fill="#3498db"/>
<polygon points="250,30 280,30 300,60 280,90 250,90 230,60" fill="#2ecc71"/>
<polygon points="350,30 370,45 370,75 350,90 330,75 330,45" fill="#f39c12"/>

星形

<polygon points="60,10 72,45 110,45 80,68 92,103 60,80 28,103 40,68 10,45 48,45" fill="#f39c12"/>
<polygon points="180,10 195,40 230,45 205,70 210,105 180,85 150,105 155,70 130,45 165,40" fill="#e74c3c"/>
<polygon points="300,10 310,35 340,35 318,55 326,85 300,68 274,85 282,55 260,35 290,35" fill="#3498db"/>

实际应用案例

箭头指示

<polygon points="20,40 60,20 60,30 100,30 100,50 60,50 60,60" fill="#3498db"/>
<polygon points="140,40 180,20 180,30 220,30 220,50 180,50 180,60" fill="#e74c3c"/>
<polygon points="260,40 280,40 280,20 300,45 280,70 280,50 260,50" fill="#2ecc71"/>

对话气泡

<polygon points="20,20 180,20 180,60 100,60 80,80 80,60 20,60" fill="#3498db"/>
<text x="100" y="45" text-anchor="middle" fill="white" font-size="12">消息内容</text>

徽章图标

<polygon points="150,10 162,40 195,40 168,60 179,90 150,72 121,90 132,60 105,40 138,40" fill="#e74c3c"/>
<text x="150" y="55" text-anchor="middle" fill="white" font-size="14">♥</text>

<polygon points="250,10 262,40 295,40 268,60 279,90 250,72 221,90 232,60 205,40 238,40" fill="#3498db"/>
<text x="250" y="55" text-anchor="middle" fill="white" font-size="14">✓</text>

<polygon points="50,10 62,40 95,40 68,60 79,90 50,72 21,90 32,60 5,40 38,40" fill="#f39c12"/>
<polygon points="150,10 162,40 195,40 168,60 179,90 150,72 121,90 132,60 105,40 138,40" fill="#e74c3c"/>
<polygon points="250,10 262,40 295,40 268,60 279,90 250,72 221,90 232,60 205,40 238,40" fill="#3498db"/>

地图标记

<polygon points="150,20 180,20 180,60 165,80 150,60" fill="#3498db"/>
<circle cx="165" cy="40" r="10" fill="white"/>

<polygon points="240,20 270,20 270,60 255,80 240,60" fill="#2ecc71"/>
<circle cx="255" cy="40" r="10" fill="white"/>

<text x="75" y="100" text-anchor="middle" font-size="10" fill="#666">位置A</text>
<text x="165" y="100" text-anchor="middle" font-size="10" fill="#666">位置B</text>
<text x="255" y="100" text-anchor="middle" font-size="10" fill="#666">位置C</text>

<polygon points="60,20 90,20 90,60 75,80 60,60" fill="#e74c3c"/>
<circle cx="75" cy="40" r="10" fill="white"/>

进度指示器

<polygon points="30,40 50,20 70,40 50,60" fill="#ecf0f1" stroke="#bdc3c7"/>
<polygon points="100,40 120,20 140,40 120,60" fill="#3498db"/>
<polygon points="170,40 190,20 210,40 190,60" fill="#ecf0f1" stroke="#bdc3c7"/>

填充规则 fill-rule

当多边形有交叉时，fill-rule 决定填充方式：

<polygon points="340,20 380,100 300,50 380,50 300,100" fill="none" stroke="#2ecc71" stroke-width="2"/>
<text x="340" y="115" text-anchor="middle" font-size="10" fill="#666">仅描边</text>

<polygon points="60,20 100,100 20,50 100,50 20,100" fill="#3498db" fill-rule="nonzero"/>
<polygon points="220,20 260,100 180,50 260,50 180,100" fill="#e74c3c" fill-rule="evenodd"/>

填充规则说明

• nonzero：默认值，根据路径方向判断填充
• evenodd：根据交叉次数判断填充

多边形与折线的区别

常见问题

Q: 多边形不显示？

A: 检查以下几点：

• 是否设置了 fill 或 stroke 属性
• points 格式是否正确
• 坐标是否在视口范围内

Q: 多边形形状不对？

A: 检查点的顺序，顺时针或逆时针会影响填充规则。

Q: 如何画正多边形？

A: 使用 JavaScript 计算顶点坐标：

function regularPolygon(cx, cy, r, sides) {
  const points = [];
  for (let i = 0; i < sides; i++) {
    const angle = (i * 2 * Math.PI / sides) - Math.PI / 2;
    const x = cx + r * Math.cos(angle);
    const y = cy + r * Math.sin(angle);
    points.push(`${x},${y}`);
  }
  return points.join(' ');
}

polygon.setAttribute('points', regularPolygon(100, 100, 50, 6));

Q: 多边形和路径选哪个？

A: 简单的多边形用 <polygon> 更简洁，复杂的形状用 <path> 更灵活。

小结

多边形是自动闭合的多点连线，通过 points 属性定义所有顶点坐标。多边形常用于三角形、星形、箭头等封闭图形。fill-rule 属性可以控制交叉路径的填充方式。