浏览器只认纯整数、逗号分隔、无空格的coords字符串，如"100,200,150,180,180,220,130,240"；少于6个数字或奇数个数字会导致area失效；shape属性仅接受小写"rect"、"circle"、"poly"、"default"；多边形无需手动闭合首尾点；coords单位为原始图片像素，不随css缩放变化，响应式场景需js重算或改用svg。
coords 坐标怎么写才有效
浏览器只认纯整数、逗号分隔、无空格的 coords 字符串，比如 "100,200,150,180,180,220,130,240"。少于 6 个数字（即不足 3 个点）会被直接忽略；奇数个数字会导致末尾坐标被截断，整个 area 失效。
常见错误包括：
- 导出坐标带小数：
"100.5,200.3"→ 必须用Math.round()或手动删掉小数位 - 含空格：
"100, 200"→ 浏览器只取到100，后续全丢 - 工具默认输出 SVG 坐标系（Y 向上）→ 实际要 Y 向下，需翻转纵坐标：若原图高为
h，则真实 y =h - y_svg
shape="poly" 拼写和大小写必须严格匹配
shape 属性只接受四个小写字符串："rect"、"circle"、"poly"、"default"。任何偏差都会让该 area 完全不响应点击，且不报错。
典型误写：
-
shape="Poly"或shape="POLY"→ 大小写敏感，无效 -
shape="polygon"或shape="triangle"→ 浏览器静默忽略，区域不可点 -
shape="poly "（末尾空格）→ 解析失败
验证方式：打开开发者工具，选中 area 元素，看 shape 属性是否高亮显示；若灰掉或无响应，先查拼写。
多边形要不要手动闭合首尾点
浏览器会自动将最后一个点连回第一个点，形成封闭区域。所以 coords="30,40,90,40,60,120" 是合法三角形，**不要写成 "30,40,90,40,60,120,30,40"**——重复首点在部分浏览器中反而导致解析失败或区域偏移。
但顶点顺序很重要：
- 必须按顺时针或逆时针连续排列，不能交叉（如
"0,0,100,100,0,100,100,0"会画成 X 形） - 交叉多边形行为未标准化，Chrome 可能渲染为两个三角形，Safari 可能完全不判定点击
- 至少需要 3 个顶点（6 个整数），否则热区被忽略
响应式场景下 coords 为什么会失效
coords 单位永远是原始图片的像素，不随 CSS 缩放、width/height 设置或视口变化而调整。哪怕只加一句 img { max-width: 100%; height: auto; }，热区就会整体漂移。
没有 HTML/CSS 原生修复方案，只有两条路可走：
- 放弃
<map></map>，改用<svg></svg>内嵌<polygon points=""></polygon>—— 天然支持缩放与 viewBox 变换 - 保留
<map></map>，但用 JS 监听resize和load，根据img.naturalWidth与当前渲染宽高，按比例重算每个coords值（需缓存原始尺寸）
静态页、固定尺寸图用 poly 最轻量；只要涉及缩放、适配、动态图，就别硬扛——这限制从 HTML4 就存在，二十年没变过，也基本不会变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
