SVG实现统计图图例需手动构建，核心是图表主体与独立图例容器，推荐右侧或底部布局，每个图例项由<rect>色块和<text>标签组成，尺寸协调、颜色严格对应数据系列，并兼顾响应式与可访问性。
HTML 中用 SVG 实现带图例说明的统计图，核心是两部分：图表主体（如柱状图、折线路径） + 图例容器（独立区域，含颜色块与文字）。SVG 本身不提供“自动图例”功能，需手动布局、配色、绑定语义，但正因为是 DOM 元素，它天然支持样式控制、事件交互和响应式缩放。
图例结构怎么安排才清晰
图例不是装饰，而是数据语义的延伸。常见做法是把它放在图表右侧或底部，与主图保持视觉对齐：
-
位置建议：右侧图例用
flex或绝对定位；底部图例可嵌在<svg>内部靠下区域，或用外部<div>包裹整个 SVG + 图例 -
最小单元：每个图例项 = 一个
<rect>（色块）+ 一个<text>（标签），横向/纵向排列 -
尺寸协调：色块宽高一般设为
12×12或16×16，文字font-size="12"，行间距dy="1.5em"，避免重叠
示例（右侧图例）：
<svg width="600" height="400">
<!-- 主图表区域（比如3个柱子） -->
<rect x="50" y="100" width="40" height="200" fill="#4e73df"/>
<rect x="110" y="80" width="40" height="220" fill="#1cc88a"/>
<rect x="170" y="130" width="40" height="170" fill="#36b9cc"/>
<!-- 图例容器（右侧） -->
<g transform="translate(420, 40)">
<rect x="0" y="0" width="16" height="16" fill="#4e73df"/>
<text x="22" y="12" font-size="12" dominant-baseline="middle">Web 访问</text>
<rect x="0" y="24" width="16" height="16" fill="#1cc88a"/>
<text x="22" y="36" font-size="12" dominant-baseline="middle">API 调用</text>
<rect x="0" y="48" width="16" height="16" fill="#36b9cc"/>
<text x="22" y="60" font-size="12" dominant-baseline="middle">后台任务</text>
</g>
</svg>颜色与数据如何对应不混乱
图例颜色必须和图表中对应数据系列严格一致，否则会误导用户：
立即学习“前端免费学习笔记（深入）”；
- 避免硬编码颜色值，推荐用 CSS 变量或 JS 统一管理调色板
- 若图表数据动态生成（如从 JSON 加载），图例也应同步生成，不要手写三行
<rect>然后忘记改第四项 - 同一图表内，同一数据系列的所有图形元素（柱子、折线段、饼图扇区）必须使用相同 fill/stroke 值
小技巧：把颜色映射存成对象
const colorMap = {
"web": "#4e73df",
"api": "#1cc88a",
"task": "#36b9cc"
};
// 渲染柱子时：fill={colorMap[item.type]}
// 渲染图例时：fill={colorMap[key]}响应式与可访问性不能丢
SVG 图例容易在缩放或小屏下挤压变形，也常被屏幕阅读器忽略：
- 用
viewBox+preserveAspectRatio保证缩放一致性，例如<svg viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet"> - 给图例
<g>加role="region"和aria-label="数据图例"，每项<text>补aria-hidden="true"（因已含语义文本），色块加aria-hidden="true" - 文字避免绝对定位像素，优先用
em或相对单位；必要时用<tspan>换行控制长文本
额外建议：
- 鼠标悬停图例项时，高亮对应图表元素（通过 class 切换或 CSS
:hover ~配合 sibling 选择器） - 点击图例可切换对应数据系列显隐（需 JS 监听 + 动态修改 opacity 或 visibility）
要不要加边框或背景增强识别度
简洁不等于简陋。轻量视觉提示能显著提升图例可读性：
- 给图例外层
<g>包一层<rect>作浅灰底（fill="#f8f9fa"），圆角rx="4"，加 1px 边框stroke="#e9ecef" - 每个图例项之间留
8px垂直间距，整体上下留12px内边距 - 文字颜色统一用
#495057（比纯黑柔和，降低视觉压迫）
这些细节不增加复杂度，却让图例真正“可用”，而不是摆设。
