ismap属性可快速获取图片单点坐标，只需给img加ismap并包裹href非空的a标签，点击即显示?x,y；mapedit导出coords需清理空白符、确保偶数个值且顺序正确；响应式下coords失效因基于原始尺寸，需换svg或js动态重映射。
用 ismap 属性快速抓取单点坐标
不用装工具、不写 JS，就能在几秒内拿到图片上任意位置的像素坐标。关键就一个 ismap 属性。
给 <img> 加上 ismap，再包一层带 href 的标签（比如 @#@#@#@#@#@#@#@#@#@0），点击图片时浏览器地址栏会自动追加类似 ?34,9 的坐标——这就是鼠标点击处相对于图片左上角的 x,y 值。
注意这三点：
-
<img ismap>必须显式设置width和height，且和原始图尺寸一致；缩放后坐标会失真 -
href不能为空字符串，href="#"或href="javascript:void(0)"都可以 - 该方法只适合取少量关键点（如按钮中心、图标锚点），不适合描复杂轮廓
MapEdit 导出 coords 时必须清理空格和换行
MapEdit 是目前最稳的多边形坐标提取工具，但导出的 HTML 里 coords 常含不可见字符：空格、制表符、换行符。Safari 和旧版 Edge 会直接跳过整条 <area>，导致热区消失。
导出后务必手动处理：
- 把
coords值全选中，粘贴到纯文本编辑器（如 VS Code）里，用正则\s+替换为单个逗号 - 确认开头结尾没逗号，例如
"120,80,135,60,"→ 删掉末尾逗号 - 检查总数是否为偶数：
poly的每个顶点占两个数，17 个点 = 34 个整数
别信“导出即用”，复制粘贴后 Ctrl+A → Delete 再重输一遍逗号，比靠肉眼扫可靠。
poly coords 写错顺序会让热区飘到图外
poly 的 coords 不是点集，而是**有向路径**。浏览器按你写的顺序连点，最后自动闭合。顺序错乱，区域就扭曲或翻转。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
比如描一个矩形，正确顺序是左上→右上→右下→左下：
"100,50,200,50,200,150,100,150"
如果写成 "100,50,200,150,200,50,100,150"，连线会交叉，形成两个三角形，填充区域可能只剩一半，甚至完全不可点。
实操建议：
- 描点时打开 MapEdit 的“显示点序号”功能，边画边看数字是否递增
- 导出后用 Chrome DevTools 悬停
<area>，看高亮框是否贴合预期边界 - 对带凹陷的省界（如甘肃、黑龙江），优先顺时针描外轮廓，再逆时针描内湖/内湾（需拆成多个
<area>）
响应式页面里 coords 失效不是代码错，是机制限制
所有 coords 值都基于图片原始尺寸（img.naturalWidth），CSS 缩放、max-width、object-fit 都不会触发坐标重算。这是规范行为，不是 bug。
所以只要页面用了响应式图片，以下情况必然发生：
- 桌面调好 coords，手机上热区偏移、变小、点不中
-
transform: scale()或zoom会让热区彻底失效，且无任何提示 - 高 DPR 屏幕（如 iPhone）下，物理像素翻倍，但 coords 还按逻辑像素算，触控区实际只有设计值的一半大小
能立刻见效的解法只有两个：
- 换 SVG：
<svg></svg>+<path></path>天然适配缩放，无需 JS - JS 动态重映射：监听
resize和load，用img.offsetWidth / img.naturalWidth算缩放比，遍历所有<area>重新赋值coords
别在 CSS 里硬调 width:100% 后还指望 coords 自动跟上——它从不认 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
