HTML SVG如何绘制多边形polygon

在SVG中，标签是绘制闭合图形的高效工具。它与的核心区别在于：浏览器会自动连接首尾顶点，形成封闭区域。开发者只需提供顶点坐标，闭合操作由渲染引擎自动完成。

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

这是的默认渲染行为。无论顶点数量多少，浏览器都会在最后一个点与第一个点之间绘制一条连接线，强制闭合图形。例如输入points="10,10 50,10 30,40"，得到的就是完整的三角形。

相比之下，严格按给定点连接，不会自动闭合。这也是常见误区：本想绘制实心三角形，结果只出现两条边，往往是因为误用了。

除了标签误用，以下细节也容易引发问题：

• 坐标格式：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值为纯数字，单位为像素，无需添加px。直接写stroke-width="2"即可。

另外，描边默认不会随SVG容器缩放等比变化。若外层添加transform: scale(2)，图形变大但描边可能仍然纤细。此时可给加上vector-effect="non-scaling-stroke"属性锁定描边宽度。

想让多边形拐角更圆润？没有rx/ry属性，但可通过stroke-linejoin="round"实现圆角连接效果，比矩形更加灵活。

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

好消息是：绝大多数情况下无需手动计算复杂的三角函数坐标。前端社区已有大量现成且经过视觉优化的坐标串，直接复用更高效可靠。

以下两个坐标串可直接复制使用：

• 通用五角星：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"

使用预设坐标时，需牢记两点：

1. 坐标系相对性：所有坐标均相对于包裹它的画布左上角(0,0)。若图形位置偏移或显示不全，应优先检查的viewBox属性是否恰当，而非逐一调整points。
2. 无定位属性：它不支持x或y直接偏移。移动整个多边形可批量修改所有顶点坐标，或更优雅地用包裹整体变换。CSS的margin或position对其无效。

最后，动态生成points字符串时，务必确保末尾无多余空格或换行符，部分老旧浏览器解析器可能因此报错。

总结而言，的魅力在于其直接与高效。理解闭合逻辑、掌握样式控制、学会坐标复用与整体变换后，即可轻松驾驭从简单三角形到复杂星形的所有闭合图形。