HTML中area标签的coords属性坐标计算步骤-html教程-PHP中文网

coords坐标必须基于图片naturalwidth/naturalheight手动量取，而非渲染尺寸；shape决定coords格式（rect/circle/poly），需严格匹配；响应式下须js动态重算缩放比，或改用svg实现真正响应式。

html中area标签的coords属性坐标计算步骤

浏览器根本不读 CSS 渲染尺寸，coords 的所有数值都以图片文件自身的固有尺寸（即 img.naturalWidth 和 img.naturalHeight）为基准。你在设计稿里量的坐标，必须严格对应这张图原始像素宽高，而不是它在页面上被缩放后的大小。

常见错误包括：

用 Figma 或 Chrome DevTools 在缩放后的页面上直接取点，得到的是视口坐标，不是原图坐标
设计稿是 @2x 导出的 2400×1600 图，你抄标注里的 “400,300,800,600”，却没除以 window.devicePixelRatio（通常是 2），结果填进 HTML 的是两倍大的坐标
标签没写 width/height 属性，又在 DOMContentLoaded 阶段就 JS 读 naturalWidth，拿到 0 或 NaN

最稳做法：打开 DevTools → Elements → 找到 img 元素 → 右侧面板确认 naturalWidth 和 naturalHeight 值 → 拿这个尺寸当标尺，在 PS、Sketch 或在线像素尺工具中重新量坐标。

浏览器只认四个 shape 值：rect、circle、poly、default。其中 default 不需要 coords；其余三者必须严格匹配格式，否则热区失效且无报错。

shape="rect" → coords="x1,y1,x2,y2"：左上角 + 右下角，不是宽高，且必须满足 x1 且 <code>y1
shape="circle" → coords="cx,cy,r"：圆心 x、y + 半径，r 必须是正整数（10.5 或 -2 会被静默丢弃）
shape="poly" → coords="x1,y1,x2,y2,x3,y3,..."：每两个数是一对顶点，总数必须为偶数，至少 6 个（3 个点）；浏览器自动闭合，首尾不需重复

注意：coords 字符串里不能有空格，比如 "100, 200" 中的空格会导致第二值截断为 "200" 后面全丢。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

coords 不支持百分比，也不响应 CSS 缩放——这是规范限制，不是 bug。只要被 max-width: 100%、transform: scale() 或容器约束改变了渲染尺寸，硬编码的 coords 就会偏移。

动态重算的关键步骤：

等图片加载完成：img.onload 或 ResizeObserver（比 window.onresize 更可靠）
获取原始尺寸：img.naturalWidth / img.naturalHeight
获取当前渲染尺寸：img.offsetWidth / img.offsetHeight（确保图片已 layout 完成）
计算缩放比：scaleX = offsetWidth / naturalWidth，scaleY = offsetHeight / naturalHeight
逐个解析并缩放：area.coords.split(',').map(Number).map((v, i) => Math.round(i % 2 === 0 ? v * scaleX : v * scaleY)).join(',')

特别注意：poly 的坐标必须严格保持偶数个，缩放时奇索引（x）乘 scaleX，偶索引（y）乘 scaleY，顺序错一位整个形状就翻转。

JS 动态重算 coords 成本高、易出错，尤其遇到高清屏（dpr > 1）、CSS 断点、旋转或复杂多边形时，逻辑迅速失控。SVG 是更现代、更可控的替代路径：

把原图作为 <image></image> 嵌入 <svg></svg>，设 preserveAspectRatio="xMidYMid meet"
热点用 <rect x="10%" y="20%" width="20%" height="15%"></rect>，直接写百分比
整个 <svg></svg> 设为 width: 100%; height: auto;，所有坐标自动响应
点击事件绑定在 SVG 元素上，用 event.target 区分区域