coords必须为偶数个数字、顶点顺序连续不自交、首点不可重复；正n边形顶点用三角函数生成：const step = math.pi 2 / n; for (let i = 0; i
area poly的coords怎么写才不触发解析异常
浏览器对
area的coords属性极其敏感：少一个数字、多一个空格、首点重复，都可能让整个区域静默失效。它不是“尽力而为”，而是“错即无”。必须满足三个硬性条件：
coords中数字个数必须为偶数，每两个构成一个x,y顶点，例如"10,20,50,30,40,80"是合法的 3 点多边形- 顶点顺序需为顺时针或逆时针连续排列，不能交叉（自相交多边形在 Safari/IE 中常被跳过）
- 不要手动重复第一个点 ——
"10,20,50,30,40,80,10,20"看似“闭合”，实则可能因解析器差异导致坐标对错位，变成(10,20)→(50,30)→(40,80)→(10,20)之外的意外组合调试时可临时给
<img>加style="max-width:90%"，再用开发者工具的“截图叠加”功能比对坐标落点。正多边形顶点怎么算才不用手敲6个点
硬编码顶点是维护灾难的起点。正
n边形本质是圆上等分点，用三角函数生成最稳。核心公式（JavaScript）：
function regularPolygonPoints(cx, cy, r, n, startAngle = 0) { const points = []; const step = (Math.PI * 2) / n; for (let i = 0; i <p>注意：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
startAngle单位是弧度，顶部朝上要传-Math.PI / 2，不是-90- 结果用于
<polygon points="{{pts}}"></polygon>或拼进area coords（需四舍五入为整数，Math.round(x)）- 若用于
area，记得把空格替换成逗号：pts.replace(/ /g, ',')图片缩放后热区偏移怎么办
coords是绝对像素值，只要图片 CSS 宽高改变、transform: scale()、或响应式断点切换，所有坐标立刻失效 —— 这不是 bug，是设计如此。可行解只有两个，别信“微调 margin 就行”：
- 用
<svg></svg>替代<map></map>：天然矢量、自动缩放、支持hover和z-index，<polygon points="..."></polygon>坐标直接相对 SVG 画布，无需换算- JS 动态重算
coords：监听resize和load，按图片原始尺寸与当前getBoundingClientRect()比例缩放每个数值，例如newX = oldX * currentWidth / originalWidth别用 CSS
background-image配伪元素做热区 —— 无法语义化、无障碍支持差、alt文本丢失。SVG polygon的points属性和area coords有啥本质区别
表面都是“一串坐标”，但底层逻辑完全不同：
<area shape="poly" coords="...">：坐标系绑定到原始图片像素，无单位、不可缩放、无事件捕获能力（只响应click）<polygon points="x1,y1 x2,y2 ..."></polygon>：坐标系是 SVG userSpace，可被<g transform="scale(2)"></g>统一缩放，支持fill、stroke、hover、pointer-events，且坐标可含小数真正麻烦的从来不是“怎么画出形状”，而是“这个形状在不同设备、不同缩放、不同交互状态下是否还准确响应”。
area把所有问题锁死在像素层，polygon把控制权交还给开发者 —— 这就是为什么复杂区域映射，最终几乎都会滑向 SVG。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
