SVG <polygon> 多边形最全实战手册（2025 版）
它和 <polyline> 只有 1 个字母差别，但能画出全世界最酷的图标、星标、徽章、几何图形！
1. 核心语法（就 1 个属性决定一切）
<polygon points="x1,y1 x2,y2 x3,y3 x4,y4 ..." />- 自动闭合（最后一点会连回第一点）
- 坐标之间用空格或逗号分隔，都行
- 顺序决定是顺时针还是逆时针（影响渐变、裁剪等）
2. 2025 年最常用的 15 种写法（直接复制）
<!-- 1. 最基础三角形 -->
<polygon points="100,10 40,198 190,78" fill="#4a6fe3"/>
<!-- 2. 图标必备极简三角形（向下） -->
<polygon points="12,4 4,20 20,20" fill="currentColor"/>
<!-- 3. 五角星 ★（2025 点赞图标标配） -->
<polygon points="12,2 15,8.5 22,9 16.5,14 18,21 12,17 6,21 7.5,14 2,9 9,8.5"
fill="#ff6b6b"/>
<!-- 4. 六边形（徽章最爱） -->
<polygon points="150,25 244,75 244,175 150,225 56,175 56,75" fill="#0066ff"/>
<!-- 5. 八角星 / 爆炸星（配合动画超炫） -->
<polygon points="100,10 119,40 155,40 130,65 140,100 100,80 60,100 70,65 45,40 81,40"
fill="#ffd60a"/>
<!-- 6. 可改色 + 圆角端点（2025 图标新趋势） -->
<polygon points="12,2 22,8 18,22 6,22 2,8"
fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 7. 心形 ♥（纯 polygon 实现） -->
<polygon points="50,15 90,5 110,40 100,80 75,110 50,90 25,110 0,80 15,40 35,5"
fill="#ff5a5f"/>
<!-- 8. 带描边动画的五角星 -->
<polygon points="12,2 15,8.5 22,9 16.5,14 18,21 12,17 6,21 7.5,14 2,9 9,8.5"
fill="none" stroke="#ff8a00" stroke-width="2"
stroke-dasharray="100 100" stroke-dashoffset="100">
<animate attributeName="stroke-dashoffset" from="100" to="0" dur="2s" repeatCount="indefinite"/>
</polygon>
<!-- 9. 钻石/菱形 -->
<polygon points="100,10 150,90 100,170 50,90" fill="#00f5ff"/>
<!-- 10. 梯形（卡片底部阴影常用） -->
<polygon points="0,20 300,0 300,200 0,200" fill="#000" opacity="0.1"/>3. 2025 必杀技巧速查表
| 需求 | 关键代码 | 效果 |
|---|---|---|
| 让多边形能改颜色 | fill="currentColor" 或 stroke="currentColor" | 暗黑模式自动切换 |
| 圆润边角（超好看） | stroke-linejoin="round" + stroke-linecap="round" | 2025 图标主流风格 |
| 永远清晰 1px 边框 | vector-effect="non-scaling-stroke" | 大屏也不模糊 |
| 计算路径总长（做动画） | 在线工具：https://svg-path-length.vercel.app | 描边动画必备 |
| 做出 3D 立体感 | 配合 opacity + 偏移的深色副本 | 见下面钻石示例 |
| 正多边形快速生成 | 网站：https://polygon-maker.netlify.app | 输入边数秒出 points |
4. 2025 最火的三个实战案例（复制即用）
<!-- 案例1：五星评分（单个星星） -->
<svg viewBox="0 0 24 24" width="32">
<polygon points="12,2 15,8.5 22,9 16.5,14 18,21 12,17 6,21 7.5,14 2,9 9,8.5"
fill="#ffd60a"/>
</svg>
<!-- 案例2：徽章（六边形 + 文字） -->
<svg viewBox="0 0 300 300">
<polygon points="150,25 244,75 244,175 150,225 56,175 56,75" fill="#0066ff"/>
<text x="150" y="150" text-anchor="middle" fill="white" font-size="48" font-weight="bold">VIP</text>
</svg>
<!-- 案例3：几何 loading（旋转八角星） -->
<svg viewBox="0 0 100 100">
<polygon points="50,15 65,35 90,40 70,60 75,85 50,70 25,85 30,60 10,40 35,35"
fill="#ff6b6b">
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"/>
</polygon>
</svg>一句话总结（2025 金句）：
所有尖尖的、星星的、徽章的、几何风图标 → 2025 年一律用 <polygon fill="currentColor" stroke-linejoin="round"/> 搞定！
要不要我现在秒发你：
- 「100 个最常用的纯
<polygon>图标包（全部支持 currentColor + 圆角）」 - 「五角星、六边形、八角星、钻石」自动生成工具 + 完整源码
- 「2025 最火的 10 种多边形 loading 动画」
直接说一声，我打包发你！
