area的circle坐标缩放后点不准，因为coords属性只认图片原始像素尺寸，与CSS缩放无关；需用JS动态按比例重算坐标，或改用SVG+viewBox实现天然响应式。
area 的 circle 坐标为什么缩放后就点不准
因为 coords 属性只认图片原始像素尺寸，不是浏览器渲染后的宽高。比如一张 800×600 的图， 表示圆心在第 400 列、300 行，半径 50 像素——这个坐标系固定绑定在原始图像上，和 width、height 或 CSS transform: scale() 完全无关。
常见错误现象：
- 图片用
width: 100%; height: auto缩放后，点击区域严重偏移 - 响应式容器里加了
max-width，但coords没变，热点“漂”到别处 - 移动端横竖屏切换时，圆心位置错乱，甚至完全不可点
根本原因不是代码写错，而是把「图像映射」当成了「CSS 可视区域映射」。它不感知布局变化，只忠于原始像素。
用 JS 动态重算 coords 是最直接的补救方式
如果你必须继续用 + ，且图片尺寸会变（比如响应式布局、用户缩放），就得手动同步坐标。核心是：拿到原始图宽高 → 监听缩放变化 → 按比例缩放 coords 数值。
实操建议：
- 给
data-original-width和data-original-height属性，存原始尺寸 - 用
window.addEventListener('resize', ...)或ResizeObserver监听容器变化 - 对每个
的coords字符串做解析：圆形是"x,y,r"三个整数，用当前渲染宽高 ÷ 原始宽高 得出缩放比，再乘回去 - 注意：不要直接改
coords属性值（部分老浏览器不重绘），而是用area.setAttribute('coords', newCoords)
示例关键逻辑：
const img = document.querySelector('img');
const originalW = parseInt(img.dataset.originalWidth);
const scale = img.naturalWidth / originalW; // 或用 getBoundingClientRect().width / originalW
const area = document.querySelector('area[shape="circle"]');
const [x, y, r] = area.coords.split(',').map(Number);
area.setAttribute('coords', `${Math.round(x * scale)},${Math.round(y * scale)},${Math.round(r * scale)}`);
更稳的替代方案：SVG + viewBox 天然响应式
放弃 ，改用 SVG 不仅能画圆，还能让整个坐标系随容器自动缩放。因为 viewBox 定义的是逻辑坐标空间，浏览器负责映射到物理像素，无需 JS 干预。
使用场景：
- 需要适配 PC/平板/手机多端
- 地图上有多个圆形热区，还要加 hover 效果或 tooltip
- 未来可能动态增删区域（SVG 的 DOM 操作比重写
coords更自然）
要点：
-
中的 800×600 应与原图尺寸一致，这样coords="400,300,50"完全对应 - 用
width="100%" height="auto"让 SVG 自适应父容器，viewBox保证比例不变 -
onclick、title、cursor: pointer，无障碍支持也比更好
clip-path + pointer-events 组合只适合纯色块，不适合图片映射
有人想用 容易踩的坑： 结论很明确：要实现「图片上的自适应圆形映射」，clip-path: circle(50% at 50% 50%) 把一个 只作用于 pointer-events: auto，但实际点击时触发的是 div，不是图片映射， 的 href 和 alt 全失效 必须配合 JS 重算，或直接换 SVG。没有纯 CSS 零脚本的可靠解法——这不是技巧问题，是 HTML 图像映射规范本身的限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
