coords坐标必须为整数且成对出现，如“10,20,80,15,95,60,40,75”，解析为(10,20)→(80,15)→(95,60)→(40,75)，自动闭合；至少3对（6个整数），顶点须顺时针或逆时针连续排列，原点为图片左上角(0,0)。
coords 坐标必须是整数，且成对出现
浏览器解析 coords 时只认逗号分隔的整数序列，每两个数字为一组 x,y 坐标。写小数（如 10.5,20.3）会被截断或忽略；带单位（如 10px,20px）直接失效；漏掉一个数导致奇数个值，整个 poly 区域就不可点击。
正确写法只有这一种：coords="10,20,80,15,95,60,40,75" → 解析为 (10,20)→(80,15)→(95,60)→(40,75)，浏览器自动闭合回起点。
- 至少要 3 对坐标（6 个整数），否则构不成封闭多边形
- 顶点顺序必须是顺时针或逆时针连续排列，不能跳着写
- 坐标原点永远是图片左上角
(0,0)，和 CSStransform、width、缩放无关
怎么拿到准确的像素坐标
别靠肉眼估，也别用设计稿标注直接抄——除非你确认该图在页面中是以 1:1 像素显示、无任何缩放、DPR=1。
最稳的方式是：把图片单独打开在浏览器中，右键「检查」，用开发者工具的元素选择器（Ctrl+Shift+C）悬停到图片上，再切到「Rendering」面板勾选「Show Rulers」，拖动标尺对齐顶点，读取像素值。
- Photoshop / Figma 等工具里量出的坐标，要确保导出图尺寸和页面中实际渲染尺寸一致
- 高 DPR 屏幕（如 MacBook Retina）下，CSS 像素 ≠ 物理像素，
devicePixelRatio > 1时固定coords必然偏移 - 在线热区生成器（如 image-map.net）可辅助描点，但导出后仍需校验是否为纯整数、偶数个
SVG 的 points 更灵活，但计算逻辑一样
用的是同一套坐标系：左上角为原点，单位像素。区别在于 SVG 可通过 的 coords 无法响应式缩放。
如果要用 JS 动态生成正多边形顶点，可用这个函数：
Math.round()
- 图片被 CSS 设置了
max-width: 100%或width: 50%？那coords就废了 - 用了
background-image而非只绑定 - 多个
重叠？后写的会盖住先写的，z-index 无效，得调换顺序或拆成非重叠区域
真正可靠的方案只有两个：要么放弃 改用 SVG，要么用 JS 库（如 rwd-image-maps）监听窗口 resize 后按比例重算 coords。硬写死像素坐标的方案，在今天已基本只适用于固定尺寸后台管理页。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
