HTML中SVG绘制多边形polygon的方法

<polygon>自动闭合是因为浏览器强制连接末点与起点，形成封闭图形；而<polyline>仅连点成线、不闭合。其points属性用空格分隔顶点坐标对，逗号分隔x/y值，顺序影响fill-rule渲染，填充与描边样式需分别设置fill和stroke属性。

直接用 <polygon> 标签，填对 points 就能画出闭合图形，不用手动连回起点——这是它和 <polyline> 最关键的区别。

为什么 points 里只写顶点坐标，图形却自动闭合？

<polygon> 的设计就是强制闭合：浏览器会自动在最后一个点和第一个点之间画一条线。哪怕你只写三个点，比如 points="10,10 50,10 30,40"，它也会形成一个三角形；而 <polyline> 不会——它只是把点连成折线，首尾不相接。

常见错误现象：
– 本想画实心三角形，结果只看到两条边（误用了 <polyline>）
– 填充颜色没生效（漏了 fill，或 fill="none" 覆盖了样式）

• points 中坐标对之间用空格或逗号分隔都行，但混用容易出错，建议统一用空格分隔坐标对，逗号分隔 x/y，例如 "100,20 140,50 140,90"
• 坐标顺序影响 fill-rule 渲染逻辑，特别是星形、自交多边形；默认 nonzero，复杂图形可显式设为 evenodd
• 如果多边形看起来“少了一条边”，先检查是否意外写了 stroke="none" 或 fill="transparent"

fill 和 stroke 怎么配才不出错？

填充和描边是独立控制的，fill 决定内部是否上色，stroke 控制边线是否显示及其样式。两者可以同时启用、只启其一，或全关。

立即学习“前端免费学习笔记（深入）”；

使用场景：
– 图标常用 fill="currentColor" 配合 CSS color 统一换色
– 纯描边图形（如轮廓线）设 fill="none"，否则可能遮挡背景
– stroke-width 单位是像素，不是 CSS 中的 px，直接写数字即可（如 stroke-width="2"）

• 若描边变细或消失，检查父容器是否有 transform: scale() —— SVG 描边宽度不会随缩放自动调整，需配合 vector-effect="non-scaling-stroke"
• stroke-linejoin 和 stroke-linecap 影响拐角和端点形状，画圆角多边形时比 rx/ry 更灵活

五角星、六边形这些“非标准”图形怎么算坐标？

不需要手算三角函数。实际开发中，绝大多数情况直接复制成熟坐标串更可靠——它们已适配常见尺寸与视觉比例。

示例（可直接粘贴）：
– 通用五角星：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"
– 正六边形（宽高约 200）：points="150,25 244,75 244,175 150,225 56,175 56,75"

• 所有坐标都是相对于当前 <svg> 的左上角（0,0），不是页面绝对位置
• 如果图形偏移或裁剪，优先检查 <svg> 的 viewBox 是否设置合理，而不是盲目调 x/y（<polygon> 本身不支持 x/y 属性）
• 动态生成多边形时，确保 points 字符串末尾无多余空格或换行，否则部分浏览器会解析失败

最易被忽略的一点：SVG 多边形没有“锚点”概念，它的位置完全由顶点坐标决定。想整体平移？得批量加减每个坐标的 x/y 值，或者包一层 <g transform="translate(x,y)">——别指望靠 margin 或 position 定位。