shape="rect"时coords必须是左上+右下坐标而非宽高，如"0,0,100,80"表示左上(0,0)、右下(100,80)；shape="circle"的r须为正整数；shape="poly"顶点须成对偶数个且无空格；所有coords均基于图片natural尺寸，缩放后需js动态重算。
shape="rect"时coords必须是左上+右下，不是宽高
很多人把 coords="0,0,100,80" 理解成“宽100、高80”，其实它是矩形两个对角点：(x1,y1) 是左上角，(x2,y2) 是右下角。浏览器只检查 x1 且 <code>y1 ，不满足就直接忽略该区域——点不动，也不报错。
常见错误包括：
-
coords="0,0,100,80"写成coords="0,0,100,80,200,150"（多出两数，被截断或错位） - 用设计稿标注的“距左100px、距顶50px、宽200px、高120px”直接套用，误写为
coords="100,50,200,120"（实际应为"100,50,300,170"） - 坐标顺序反了，比如
coords="100,80,0,0"，导致区域无效
shape="circle"的r必须是正整数，小数和负数会被静默丢弃
coords 解析器只做字符串切分 + parseInt() 转换，遇到 "120.5,80.2,15.8" 会变成 [120, 80, 15]；"120,-80,15" 则变成 [120, 0, 15]（负数转为 0），结果圆心偏移、半径变小甚至为 0。
务必确保导出或手填的值全是整数：
- 设计工具量出的坐标带小数？手动四舍五入或向下取整（如 Figma 导出需关掉“保留小数”）
- 高清屏（dpr=2）下，标注值是物理像素，要除以 dpr 后再取整：
Math.round(240 / window.devicePixelRatio) - 不要写
coords="120,80,15.0"或coords="120,80,+15"，逗号间不能有空格或符号
shape="poly"顶点必须成对、偶数个、无空格，首尾不重复
浏览器按逗号切分后，逐个转数字，然后两两配对作为 (x,y)。总数必须是偶数，否则最后一个数字被丢弃——比如 coords="100,200,150,180,200"（5 个数），实际只取前 4 个，第三点丢失。
多边形自动闭合，不需要写 "100,200,150,180,200,220,100,200"（末尾重复首点）；但若顶点少于 3 对（即少于 6 个数），整个 <area> 会被忽略。
真实踩坑点：
- Figma/PS 导出的坐标含空格或换行，粘贴后变成
"100, 200,150 ,180"→ 第二个值截为"200,150"，后续全乱 - 用 JS 动态生成 coords 字符串时，忘了
.map(Number)或用了parseFloat，导致小数残留 - 顶点顺序画反（比如顺时针 vs 逆时针），虽不影响点击，但交叉多边形可能渲染异常或被部分浏览器降级
所有 coords 都基于 naturalWidth/naturalHeight，缩放后必须重算
哪怕你用 CSS 把一张 1200×800 的图缩到 300px 宽，coords 依然得按原始尺寸写。浏览器内部会用缩放比做映射，但这个过程不可控、不透明——一旦图片没加载完、natural 尺寸读错、CSS transform 干预，就彻底失效。
真正可靠的响应式做法只有 JS 动态重算：
- 监听
img.onload和ResizeObserver（比window.onresize更准，能捕获 CSS 尺寸变化） - 用
img.naturalWidth / img.offsetWidth得横向缩放比，同理算纵向比 - 对每个
area.coords字符串执行split(',').map(Number).map((v, i) => i % 2 === 0 ? v * scaleX : v * scaleY) - 最后赋回
area.coords = newCoords.join(',')
别依赖 CSS transform: scale() 或 zoom，它们不触发 offsetWidth 变化，但会破坏 coords 映射逻辑——这是最隐蔽也最难调试的一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
