是的，shape="poly"坐标按coords中从左到右成对读取为x,y顶点，自动闭合；单位为像素，基于图片固有尺寸；主流浏览器解析逻辑一致，但空格处理有差异；IE有坐标数量截断风险。
area 元素的 shape="poly" 坐标顺序在所有主流浏览器中完全一致
是的，
的坐标解析行为在 Chrome、Firefox、Safari、Edge（Chromium 内核）中完全统一：按
属性中逗号分隔的数值**从左到右、成对读取**，每两个数构成一个点的
坐标，顺序即多边形顶点顺序。
例如：
总是被解析为三点：
→
→
，并自动闭合（末点连回首点）。
coords 中的空格和逗号处理有兼容性差异
虽然坐标逻辑一致，但各浏览器对
字符串中空白字符的容忍度不同：
Chrome / Edge：允许任意空格（开头、结尾、中间多个空格），如
可正常解析
Firefox：对开头/结尾空格较敏感，
有时会丢弃首尾空格后截断失败（尤其含非数字字符时）
Safari：最严格，遇到连续空格或换行可能直接忽略整段
实操建议：
始终用单个英文逗号分隔，不加空格
，例如写成
，避免任何解析歧义。
坐标单位始终是像素，且基于 image 元素的自然尺寸
的坐标不是相对于视口或父容器，而是相对于
元素的
固有尺寸（naturalWidth / naturalHeight）
，与是否缩放（
/
CSS 或属性）无关。
这意味着：
如果图片 HTML 中设了
但原图宽 400px，
仍对应原图横向 100px 处，而非缩放后 200px 宽度下的 100px
响应式场景下，若用 CSS 缩放图片，
坐标不会自适应——必须按原图尺寸写坐标，再配合
和
使用
没有浏览器支持百分比坐标（如
），所有值必须为整数像素
IE 与旧版 Edge 的 poly 坐标有隐式截断风险
IE11 和旧 Edge（EdgeHTML）对
长度有限制：超过约 1000 个数值（即 500 个点）时，部分浏览器会静默截断后续坐标，不报错也不警告。
现代 Chromium/Firefox/Safari 已无此限制，但若需兼容 IE：
避免单个
描述过于复杂的多边形，优先拆分为多个
用 JavaScript 动态校验
是否为偶数且不过长
注意：IE 不支持
或空
，必须显式指定
、
等
真正容易被忽略的是坐标系原点——它永远是图片左上角（0,0），且 y 轴向下增长；没有浏览器支持翻转、偏移或 SVG-style transform。写坐标前务必确认图片没被 CSS
或
干扰布局。
shape="poly"coordsx,y(10,20)(30,40)(50,60)coords" 10 , 20 , 30 , 40 "" 10,20 "coordscoords="10,20,30,40,50,60"areawidthheightwidth="200"coords="100,50"areausemap"25%,33%"coordsareaareaelement.coords.split(',').lengthshape="default"shapepolyrecttransform: rotate()direction: rtl