area标签不能用于绘制面积图，因其专用于图像热区映射，仅支持静态坐标定义矩形、圆形或多边形点击区域，不支持数据绑定、坐标系缩放、路径填充或响应式重绘，且coords依赖原始图片像素尺寸，缩放后极易错位。
area chart 在 HTML 中没有原生标签，也不能靠 <area> 标签实现——这是最常见的误解。真正的面积图是连续数据的填充折线图，而 <area> 是图像热区映射用的，和图表毫无关系。
为什么不能用 <area> 标签画面积图？
-
<area>必须嵌套在<map></map>内，且只用于定义图片上可点击的几何区域（如矩形、圆形、多边形），它不接受数据绑定、不支持坐标系缩放、无法响应式重绘。 - 它的
coords值依赖原始图片像素尺寸，一旦图片被 CSS 缩放或容器流式变化，热区立刻错位。 - 没有路径填充、渐变、动画、悬停反馈等图表必需能力。
你看到的“HTML 面积图”实际只有三种可行路径：
- 纯 CSS + 自定义属性（适合静态、少量数据）
- SVG
<path></path>+d属性（推荐，语义清晰、缩放安全） - Canvas 或第三方库（如 Chart.js）（适合动态、交互复杂场景）
纯 CSS 实现面积图的关键限制
- 数据必须转为 0–1 区间（通过
--start和--end自定义属性传入） - 列宽靠
flex-grow: 1+flex-basis: 0均分容器宽度，不依赖 item 数量硬编码 - 面积填充靠
clip-path: polygon(...)截取矩形区域，顶点坐标需按比例计算（例如：左下(0%,100%) → 左上(0%,calc(100% - var(--start) 100%)) → 右上(100%,calc(100% - var(--end) 100%)) → 右下(100%,100%)） -
clip-path在 Safari 旧版本和部分安卓 WebView 中支持不稳定，需加-webkit-clip-path
示例片段：
.area-chart > * {
flex: 1 1 0;
background: #4a90e2;
clip-path: polygon(
0% 100%,
0% calc(100% - var(--start) * 100%),
100% calc(100% - var(--end) * 100%),
100% 100%
);
}注意：clip-path 的百分比是相对于当前元素自身尺寸，不是父容器，所以每个柱子必须是独立 flex item。
立即学习“前端免费学习笔记（深入）”；
SVG <path></path> 是更靠谱的选择
- 坐标系天然支持数据映射（比如把 [0, 100] 映射到
viewBox="0 0 400 200"） <path d="M0,180 L50,120 L100,150 L150,90 L400,180 Z"> 可直接表达面积轮廓 </path>- 支持
fill、stroke、opacity、filter，也方便加过渡动画 - 所有现代浏览器对 SVG 路径渲染一致，无兼容性盲区
关键点：
- 不要用
<area>或<map></map>混入 SVG - 不要手动拼接
d字符串，应写 JS 函数生成（避免坐标错位） - 若需响应式，优先用
viewBox+preserveAspectRatio，而非固定 width/height
<area> 标签和面积图完全无关，强行混用只会导致坐标失效、点击区域漂移、无障碍崩溃。真正做面积图时，要么退回到 SVG 路径的可控精度，要么交给 Canvas 或轻量库处理数据映射与重绘逻辑。最易被忽略的是：面积图本质是路径填充，不是热区划分；它的坐标必须随数据缩放，而不是死绑图片像素。
