关键在于统一viewBox坐标系、语义化标记、CSS状态驱动及JS辅助聚焦：路径需基于viewBox绝对定位并设fill="transparent"；用:hover与:focus-visible双态高亮，配合tabindex、title和aria-label保障可访问性；交互逻辑由JS绑定click/keydown事件实现；响应式适配采用transform缩放文本并监听resize动态调整。
用 SVG 实现地图边界路径的区域高亮交互，关键不是给每个 <path></path> 加个 hover 就完事——那样容易错位、不响应键盘、缩放后失效，甚至在高分屏上模糊。真正稳定的做法是：统一坐标系 + 语义化标记 + CSS 状态驱动 + JS 辅助聚焦与可访问性。
1. 路径必须基于 viewBox 绝对定位
所有州/省的 <path></path> 必须共享同一套 viewBox 坐标（比如 viewBox="0 0 2347 1147"），且路径中的坐标（如 M 511.643 305.122）直接对应底图像素位置。不能靠 transform 或 position: absolute 拼凑，否则 hover 区域和视觉轮廓会偏移。
- 底图用
<image></image>作为参考（开发阶段保留，上线可移除） - 每个
<path></path>设置fill="transparent"，确保鼠标能穿透到底层，同时保持 stroke 可见 - 避免内联
style，统一用 CSS 类控制颜色、描边等，例如：.region { stroke: #95a5a6; stroke-width: 0.5; }
2. 高亮靠 CSS :hover + :focus-visible 双状态
纯 CSS 实现视觉反馈最轻量，但需配合 HTML 层级与可访问属性，否则屏幕阅读器或键盘用户无法感知。
- 给每个
<path></path>加tabindex="0"和focusable="true" - 定义两个状态样式：
.region:hover, .region:focus-visible { fill: #3498db; fill-opacity: 0.2; }
（用半透明fill覆盖区域，比改stroke更直观） - 加
<title></title>提示名称，再配aria-label补充简要信息，内容一致，例如：<title>广东省：华南沿海，GDP 全国第一</title>aria-label="广东省：华南沿海，GDP 全国第一"
3. 点击/键盘交互由 JS 触发详情逻辑
CSS 负责视觉反馈，JS 负责行为响应。不要把数据逻辑塞进 CSS，也不要用 onclick 行内写法。
- 监听
click和keydown（捕获 Enter/Space），例如：pathEl.addEventListener('click', showDetail);pathEl.addEventListener('keydown', e => { if (e.key === 'Enter') showDetail(); }); - 用
event.target获取当前区域，从<title></title>或自定义data-id中提取标识符 - 弹窗或侧栏展示时，自动将焦点移到新内容，保持键盘流可用
4. 响应式与高分屏适配要点
SVG 默认单位是 px，但 2x 屏幕下文字和描边容易发虚，缩放时尺寸又不会自动调整。
- 文本标签不用固定
font-size，改用transform="scale(0.8)"+ 相对字号（如font-size="15"），让文字随图形同步缩放 - 监听
window.resize，动态重设<text></text>的transform和font-size（若使用内联 SVG） - 对复杂区域（如岛屿群、细长海岸线），可加
pointer-events: auto显式启用，避免被父容器遮挡
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
