HTML中area标签多边形坐标点的排序规律-html教程-PHP中文网

poly的coords顶点顺序必须连续单向不交叉，仅接受纯整数、逗号分隔无空格，数量为≥6的偶数，shape属性须小写"poly"，usemap与map name须完全一致。

html中area标签多边形坐标点的排序规律

poly的coords顶点顺序必须连续且不交叉

浏览器按coords字符串中数字出现的先后顺序，两两配对为(x, y)顶点，并依次连线；最终自动闭合首尾。所以顺序不是“随便列点”，而是决定多边形是否可识别、点击区域是否准确的关键。

常见错误现象：热区显示为细线、点击响应飘在图外、部分区域无法触发——大概率是顶点顺序跳变或交叉，比如本该顺时针绕一个省份轮廓，却把西北角、东南角、东北角、西南角混着写。

顺时针或逆时针都合法，但必须严格沿边界单向走（如从左上开始，一路描到右下再回起点）
禁止“Z字形”或“之字形”排列（如"0,0,100,100,0,100,100,0"会画成X，不是四边形）
凹多边形（如中国地图中的甘肃、山东半岛）可以正常工作，但人眼难校验，建议用Inkscape导出SVG路径后转坐标

coords里不能有小数、空格或单位，否则整个area失效

coords只接受纯整数、英文逗号分隔、无空格的字符串。任何偏差都会让浏览器静默丢弃该area，表现为点击完全无响应，开发者工具里也看不到高亮。

典型错误包括："100.5,200.3"（小数）、"100, 200"（空格）、"100px,200px"（带单位）、"100,200,150,180,"（末尾多余逗号）。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

取点工具务必关闭“相对坐标”“百分比输出”“SVG坐标系（Y轴向上）”等选项
优先基于图片原始尺寸（img.naturalWidth/img.naturalHeight）取点，而非CSS缩放后的渲染尺寸
用parseInt()或正则/\d+/g清洗导出坐标，再.join(",")拼接

shape="poly"拼写和大小写必须完全正确

shape属性只认四个小写字符串："rect"、"circle"、"poly"、"default"。写成"POLY"、"Poly"、"polygon"或漏掉引号，浏览器不会报错，但直接退化为无效热区。

更隐蔽的问题是：某些编辑器自动首字母大写，或复制粘贴时混入全角字符，导致看似一样实则不匹配。

检查<area shape="poly" coords="...">这一行，确认poly是纯ASCII小写
usemap="#myMap"与<map name="myMap"></map>必须完全一致（包括#号、大小写、有无空格）
不要依赖“看起来像就能用”，用开发者工具的Elements面板确认shape属性值确实被解析为"poly"

coords数量必须为偶数且≥6，少一个就彻底失效

coords字符串拆解后，数字个数必须是偶数，且至少6个（即3个顶点）。奇数个数字（如5个、7个）会导致最后一个坐标被截断，整个多边形无法构成；少于6个（如4个）会被浏览器忽略，area不参与热点计算。

例如coords="100,200,150,180,180,220"是合法三角形；但coords="100,200,150,180,180"（5个数）或coords="100,200,150,180"（4个数）均无效。

手写时用文本编辑器显示行号或括号高亮，确保逗号数+1 = 数字总数
JS动态生成时，先split(",")再filter(x => x.trim())去空，最后检查length % 2 === 0 && length >= 6
首尾点**绝不重复**——"100,200,150,180,180,220,100,200"是错的，8个数反而可能让浏览器误读为4个点，第4点覆盖前3点逻辑

实际调试中最容易被忽略的是：你以为坐标是对的，其实是图片缩放后用截图工具量的；你以为顺序没问题，其实是工具导出时用了SVG坐标系（Y轴反向）；你以为shape写对了，其实复制时带了不可见Unicode字符。这些细节不排查，光调coords数值毫无意义。