绘制三角形需用shape="poly"且coords为6个整数，格式为x1,y1,x2,y2,x3,y3，浏览器自动闭合；坐标基于原图像素，原点在左上角，y轴向下，须确保三点不共线且map与img正确绑定。
area 标签 coords 绘制三角形需要 6 个数值
coords 属性在 <area> 中用于定义可点击区域的坐标，绘制三角形必须用 poly 形状（不能用 rect 或 circle），且坐标数必须是偶数个、至少 6 个——对应三角形的 3 个顶点，每个顶点用 x,y 表示，顺序拼接即为 x1,y1,x2,y2,x3,y3。
常见错误是只写 3 个数（误以为是顶点序号）或漏掉逗号分隔；也有人套用 Canvas 坐标习惯，忘记 <area> 的坐标系原点在图像左上角，y 轴向下增长。
coords 数值单位是像素，且基于关联 image 的实际尺寸
所有 coords 值都是相对于 <img> 元素原始宽高（不是 CSS 缩放后的尺寸）的绝对像素值。如果图片被 width/height 属性或 CSS 拉伸，但 coords 仍要按原图分辨率计算，否则热点会偏移。
实操建议：
- 用图像编辑器（如 Photoshop、Figma）打开原图，开启标尺，直接读取三个顶点的
x,y像素坐标 - 若只有缩放后的截图，先用
img.naturalWidth和img.naturalHeight获取原图尺寸，再按比例换算 - 避免手动估算，哪怕误差 2–3 像素，三角形顶点就可能点不中
coords 顶点顺序影响形状填充和浏览器兼容性
虽然大多数浏览器对顺时针/逆时针不敏感，但某些旧版 IE 或 Safari 可能因顶点绕向异常导致区域识别失败或点击失效。更关键的是：如果三个点共线（例如 0,0,10,10,20,20），<area> 将退化为一条线，无法响应点击——这不会报错，但功能静默失效。
验证方法：
- 把
coords值粘贴进在线多边形工具（如 https://www.image-map.net/）预览是否闭合为实心三角形 - 用开发者工具检查
<area>是否被正确解析：选中后看 computed styles 里shape是否为poly，coords是否被完整保留 - 测试时务必在真实鼠标点击下验证，不要只靠 hover 效果（部分浏览器 hover 不触发 area 状态）
area coords 三角形无法响应点击的典型原因
最常被忽略的是 <map></map> 和 <img> 的绑定关系断裂。即使 coords 完全正确，以下任一条件不满足都会让三角形“不可点”：
-
<img>缺少usemap属性，或值与<map></map>的name不完全匹配（注意大小写和空格） -
<map></map>未包裹在内，或被其他 DOM 结构意外移出文档流 - CSS 设置了
pointer-events: none在<img>或其父容器上 - 该
<area>被后续同shape的其他<area>覆盖（area 渲染顺序从上到下，后定义的优先捕获事件）
真正画对了三角形只是第一步，coords 数值本身不保证可交互——绑定、层级、样式三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
