最直接方式是用现成GeoJSON经工具转为精简<path d="...">，配合d3-geo投影适配坐标系并设置pointer-events="all"确保点击响应。
SVG 地图不是靠“绑定”实现的，而是靠直接写 <svg> + <path> 路径数据，或用 JavaScript 动态加载 GeoJSON 并转成路径——所谓“绑定”是误解，容易卡在 DOM 事件监听或数据响应上白忙活。
怎么把中国各省轮廓画进 SVG 里
最直接的方式是找现成的 TopoJSON 或 GeoJSON（比如 https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json），用工具（如 topojson-simplify 或在线转换器）转成精简的 <path d="...">。别手写 d 属性——坐标点动辄上千个，错一位就整块变形。
实操建议：
- 优先用
d3-geo+d3-path生成路径，而不是手动拼<path>字符串 - 若纯静态展示，可复制已压缩的 SVG 路径（注意去除
transform和冗余style，避免缩放错位） - 用
viewBox="0 0 960 500"替代固定width/height，保证响应式缩放不失真
点击省份触发事件，但 onclick 不生效
常见错误是给 <path> 加了 fill="none" 或透明色，导致鼠标穿透——SVG 元素默认不响应事件，除非有可击中区域。
立即学习“前端免费学习笔记（深入）”；
必须确保：
-
fill不能是none，哪怕设为fill="#fff000" opacity="0.001" - 加
pointer-events="all"（尤其当父<g>有pointer-events="none"时） - 别在
<svg>外层套div并监听 click——事件源是<path>，应直接绑定
示例：
<path d="M100,200 L150,200 ..." data-code="CN-11" fill="#eee" pointer-events="all" onclick="showDetail(this.dataset.code)">
用 d3.js 加载 GeoJSON 后地图空白或错位
本质是投影（projection）没配对：GeoJSON 坐标是经纬度（WGS84，单位是度），而 SVG 是像素平面，中间必须过一遍 d3.geoMercator() 这类投影函数。
关键检查点：
- 确认
d3.geoPath().projection(...)已设置，且投影范围用.fitSize([width, height], geojson)自动适配 - 别漏掉
features层级——GeoJSON 的地理数据藏在data.features，不是直接data - Chrome 控制台报
NaN在d属性里？说明某坐标点被投影函数返回了NaN，大概率是坐标顺序反了（应是[lng, lat]，不是[lat, lng]）
地图缩放/拖拽后事件失效或坐标偏移
这是最隐蔽的坑：用 transform 缩放 <g> 容器后，event.clientX/Y 是屏幕坐标，而 <path> 的边界检测仍按原始 SVG 坐标系算——两者不再对齐。
正确做法：
- 放弃用
transform做交互缩放，改用d3-zoom，它会自动重算event到 SVG 坐标系的映射 - 如果必须手写缩放，得用
svg.getScreenCTM().inverse()把鼠标位置转回 SVG 坐标，再做 hit-test - 别依赖
getBBox()获取缩放后的实际尺寸——它返回的是未 transform 前的包围盒
复杂点在于：SVG 坐标系、CSS 像素、设备 DPR、zoom 行为、事件坐标系，四者稍一错位，点击就飘。
