poly的coords必须手动闭合且shape拼写严格为小写poly，否则热区失效；coords单位为原始像素，缩放需重算或改用svg；取坐标应借助工具并补首点。
poly的coords必须手动闭合，否则不是封闭区域
浏览器不会自动把最后一个点连回第一个点。写成 coords="10,20,30,40,50,60" 只画出两段线（10,20→30,40→50,60），根本构不成三角形，点击行为不可靠，部分浏览器直接忽略该 <area>。
正确做法是显式重复起点：coords="10,20,30,40,50,60,10,20" —— 三个顶点 + 首点复位，共6个数字变成8个，构成真正封闭的三角形。
- 四边形至少要8个数字：
coords="20,10,80,10,80,70,20,70,20,10" - 五边形需10个数字，以此类推：n边形 = 2n个整数，且首尾坐标必须一致
- 坐标顺序必须是顺时针或逆时针连续排列，交叉连线会导致渲染异常或点击失效
shape="poly"拼错就完全失效，大小写和拼写都敏感
shape 属性只认四个值：rect、circle、poly、default，其他任何写法都会被浏览器静默忽略——不报错，但热点点不了。
常见误写包括：shape="polygon"、shape="Poly"、shape="rectangle"、shape="oval"。这些全都不生效，对应区域点击无响应。
- 必须全小写，且只能是这四个字符串之一
-
poly是唯一合法写法，polygon看似合理，实则彻底无效 - 检查方式很简单：打开开发者工具，选中
<area>，看shape属性是否高亮显示；若灰掉或没反应，大概率拼错了
coords单位是像素，缩放后坐标立刻错位
所有坐标以图片左上角为原点 (0,0)，x向右、y向下，单位是原始图片的像素。一旦图片用 CSS 缩放（比如 width: 100%）、或在响应式布局里拉伸变形，coords 就完全对不上了。
这不是“偶尔偏一点”，而是热区整体漂移甚至消失。没有浏览器会帮你重算坐标。
- 最稳方案：图片用固定尺寸（如
width="800"），禁止 CSS 缩放 - 若必须响应式，得用 JS 监听
resize+ 获取img.naturalWidth和当前显示宽高，按比例重算所有coords - 更推荐改用 SVG：它天然矢量缩放，
<polygon points="..."></polygon>不受分辨率影响
怎么取准 coords？别手算，用工具导出再微调
靠眼睛估、靠 PS 标尺数、靠截图量角器，误差普遍超 10px。UI 给的标注图若非“按原始尺寸截图”，坐标直接报废。
推荐流程：用在线工具（如 Image Map Generator）上传原图 → 点选顶点 → 导出 HTML → 拷进代码 → 在浏览器里开开发者工具拖动 <area> 的 coords 实时调试。
- 导出的 coords 默认不闭合，务必手动补上首点
- 工具生成的坐标可能是浮点数，
<area>只接受整数，需Math.round()或直接删小数位 - 多边形顶点超过 10 个时，建议拆成多个
<area>，避免单个 coords 字符串过长难维护
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
