coords值必须基于原图像素尺寸，浏览器仅认naturalwidth/naturalheight；shape与coords格式须严格匹配（rect需4个数、circle需3个、poly需偶数个且显式闭合）；usemap与map name须逐字节一致并带#前缀；缩放时需js动态重算coords。
coords 值必须基于原图像素尺寸，不是 CSS 显示尺寸
浏览器解析 coords 时，只认图片原始宽高（naturalWidth/naturalHeight），完全忽略 width、height 属性或 CSS transform/scale。哪怕你用 img { width: 200px; height: 150px; } 把一张 800×600 的图压成四分之一大小，coords="0,0,100,100" 依然指向原图左上角 100×100 像素区域——在屏幕上它只占 25×25 像素，点不中是必然的。
验证方法：console.log(img.naturalWidth, img.naturalHeight) 和 console.log(img.offsetWidth, img.offsetHeight) 对比，差值就是缩放比例。
- 导出坐标前，务必右键图片 → “在新标签页中打开”，看 URL 对应的真实尺寸
- 用 Figma/Photoshop 标注时，关闭“响应式缩放”或“按画布比例导出”，选“按原始尺寸”
- 如果设计稿是 2x 或 3x 切图，坐标要除以对应倍率（如 @2x 图标注了 x=200,y=100，实际 coords 应为 100,50）
rect/circle/poly 的 coords 格式和数量不能错
shape 和 coords 是强绑定对，写错一个数或顺序颠倒，整个 area 就静默失效——浏览器不会报错，只是不响应点击。
-
shape="rect"：必须且仅能有 4 个整数，格式为x1,y1,x2,y2，且x1 且 <code>y1 ；写成 <code>100,50,10,80（x1 > x2）会导致区域消失 -
shape="circle"：必须且仅能有 3 个整数，cx,cy,r，半径r必须 > 0；coords="50,50,0"无效 -
shape="poly"：必须偶数个整数，至少 6 个（3 个点）；顶点按绘制顺序排列，首尾**不自动闭合**，所以coords="10,20,30,40,50,60"是开路径，实际渲染依赖浏览器补线逻辑，行为不可控；正确写法是显式重复起点：coords="10,20,30,40,50,60,10,20"
usemap 和 map name 不匹配是热区失效的第一大原因
usemap 属性值必须带 # 前缀，且与 <map name="xxx"></map> 的 name **逐字节一致**：大小写、空格、连字符都不能差。漏掉 #、多一个空格、大小写混用（如 usemap="#NavMap" + <map name="navmap"></map>），热区就彻底静默，开发者工具里也看不到关联高亮。
- 推荐统一用小写+连字符命名：
usemap="#product-section"+<map name="product-section"></map> - HTML5 兼容性更稳的做法：同时写
id和name：<map id="product-section" name="product-section"></map> - 确保
<map></map>在内、未被 JS 移除或包裹在<template></template>/<noscript></noscript>中
缩放图片时 coords 动态重算的最小可行方案
纯 HTML/CSS 没有响应式 coords 机制。如果你必须缩放图片（比如适配移动端），唯一可靠方式是用 JS 监听加载与尺寸变化，按比例重写每个 area 的 coords 属性。
核心逻辑：获取 img.naturalWidth / img.offsetWidth 得到横向缩放比，同理得纵向比，再遍历所有 area，把每个坐标值分别乘以对应比例并取整。
- 必须监听
img.onload，否则naturalWidth为 0 - 用
ResizeObserver监听容器尺寸变化（比window.resize更精准） - coords 字符串需先
split(',').map(Number)转数字，处理完再join(',')回字符串 - 避免高频重算：加防抖，或只在
offsetWidth变化超过 1px 时触发
真正麻烦的不是计算本身，而是 poly 区域顶点一旦缩放失真（比如拉伸变形），人眼判断是否覆盖目标物体会明显偏移——这时候不如换 SVG。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
