<map>+<area>实现图像映射，coords基于图片原始像素，不随CSS缩放自适应，需JS重算坐标或改用SVG替代。
HTML 中没有“映射区域”这个原生概念，你实际想说的是 <map> + <area> 配合 <img> 的图像映射（image map），或者更可能是 Canvas/SVG 内部的可点击热区（hotspot）。这两类“映射区域”都**不会随缩放自动适配坐标**，必须手动处理尺寸与坐标系的同步。
为什么 <map><area> 在响应式页面里失效
<area> 的 coords 属性（如 "10,20,50,60"）是绝对像素值，绑定的是原始图片的尺寸。一旦你用 CSS 缩放 <img>（比如 width: 100% 或 max-width: 100%），<area> 的坐标就不再对齐——点不中、区域偏移、部分失效。
- 不要给
<img>设width/height属性的同时又用 CSS 缩放；二者冲突，浏览器优先按 HTML 属性渲染，CSS 只做视觉拉伸 - 若图片必须响应式，就别用
<map>——它已过时，缺乏 DPR 支持，无法监听容器变化 - 替代方案：把图片换成
<svg>，用<rect>/<circle>+viewBox定义可点击区域，天然支持缩放和事件绑定
Canvas 里的点击区域怎么跟着画布一起缩放
Canvas 绘制的图形（比如一个圆形按钮）本身没有 DOM 事件能力，你得靠 ctx.isPointInPath() 或坐标计算判断点击。但只要画布尺寸变了，所有硬编码的坐标（如 x=100, y=50）就立刻错位。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 所有交互坐标必须基于当前 canvas 的逻辑像素尺寸（即
canvas.width/canvas.height属性值），而非 CSS 显示尺寸 - 鼠标事件的
clientX/clientY要转成 canvas 坐标：用getBoundingClientRect()获取 canvas 左上角屏幕位置，再减去偏移并除以devicePixelRatio - 如果用了
ctx.scale(dpr, dpr)，后续所有绘图和 hit-test 都要统一在缩放后的坐标系下进行，不能混用原始像素和缩放后坐标
SVG 中的 <area> 等效物怎么保持点击精准
SVG 没有 <area>，但你可以用 <g> 包裹图形+文字，并绑定 click 事件；或直接给 <path>、<circle> 加 cursor: pointer 和事件监听。问题在于：用 viewBox 缩放 SVG 后，内部元素的物理点击尺寸可能跌破 48px。
立即学习“前端免费学习笔记（深入）”；
- 确保 SVG 外层容器设了
width: 100%和min-width: 48px，避免被 flex/grid 压扁 - 不要只靠
transform: scale()放大图标——它不扩大事件响应区，只放大视觉 - 对小图标区域，用
<rect>盖一层透明但带事件的“热区”，width/height设为 48x48，fill="none"，pointer-events="visiblePainted"
真正麻烦的不是“怎么缩放”，而是“缩放后坐标系是否一致”。Canvas 要自己算，SVG 要管好 viewBox 和容器约束，<map> 则建议彻底弃用。别指望浏览器替你映射——它只认你写的数字，不多想也不纠错。
