poly坐标必须满足偶数个整数、无空格逗号分隔、按顶点顺序排列、基于原始图像素四条件；coords须为纯数字逗号串，shape仅认小写rect/circle/poly/default，多边形无需手动闭合，usemap与map name须严格一致，css缩放会导致坐标失效。
直接说结论：poly坐标不是“随便列数字”，而是必须满足“偶数个整数、无空格逗号分隔、按顶点顺序排列、基于原始图像素”这四个硬条件，缺一即失效。
coords字符串怎么写才被浏览器认？
浏览器对 coords 的解析极其严格，只接受纯数字+逗号的线性字符串，任何偏差都会静默失败：
-
coords值必须是偶数个整数，两两组成 (x, y)，例如"120,80,135,60,150,80,140,110"→ 解析为 4 个点 - 不能含小数（
"120.5,80.3"会被截断或整个忽略） - 不能有空格（
"120, 80"中的空格会导致从该位置起后续坐标全部丢弃） - 不能带单位（
"120px,80px"完全无效） - 少于 6 个数字（即不足 3 个点）时，浏览器直接跳过该
area
shape="poly"拼写和大小写错在哪？
shape 属性只认四个小写字符串："rect"、"circle"、"poly"、"default"。其他任何写法都等同于没写：
-
shape="Poly"或shape="POLY"→ 大小写敏感，无效 -
shape="polygon"或shape="triangle"→ 不报错但不工作，浏览器可能当rect处理或彻底忽略 -
shape="poly "（末尾空格）→ 同样失效
验证方法：打开开发者工具选中 area 元素，看 shape 属性是否高亮显示；若灰掉或 hover 图片无高亮反馈，先查拼写。
多边形要不要手动闭合首尾点？
**不用，且不建议手动重复首点。** 浏览器会自动将最后一个点连回第一个点，形成封闭区域：
- 正确写法：
coords="30,40,90,40,60,120"→ 三角形，3 个点共 6 个数字 - 错误写法：
coords="30,40,90,40,60,120,30,40"→ 4 对点，第 4 对覆盖逻辑，可能导致区域偏移或部分浏览器解析失败 - 顶点顺序必须连续（顺时针或逆时针均可），但不能交叉（如
"0,0,100,100,0,100,100,0"会画成 X 形，非四边形）
为什么点了没反应？优先排查这三处
90% 的“poly 不工作”不是语法问题，而是环境错位：
-
usemap值（如"#map-china"）必须与<map name="map-china"></map>的name完全一致（区分大小写、无多余空格、usemap带#，name不带） -
不能被 CSS 缩放：
width: 100%、max-width: 100%、transform: scale()都会让像素坐标完全脱靶 - 多个
area重叠时，DOM 顺序决定响应优先级——靠前的会挡住后面的，调试时可临时删掉其他area单独测试
真正难处理的是响应式场景：poly 坐标是死的，不会随图片缩放重算。要么固定图片尺寸，要么换 SVG，要么用 JS 动态监听 resize + 按 img.naturalWidth 和当前渲染宽高重算每个坐标——没有捷径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
