使用d3.js实现无geojson/topojson的自定义SVG地图平移缩放及边界限制求助

• 尺寸硬编码为800*800，没有跟随视口动态计算，天然无法实现占满全窗口的效果
• 元素选择逻辑错位：代码里提前选中了AI导出SVG自带的#gElem，但后续又在SVG里追加了一个全新的空g节点，实际zoom事件的绑定对象和承载地图内容的节点完全不匹配
• 边界配置逻辑缺失：translateExtent 没有结合缩放比例动态计算，哪怕配置了边界，缩放后的内容依然会滑出可视容器
• 版本兼容问题：如果使用的是d3 v6及以上版本，代码里引用的d3.event 已经被废弃，直接运行会触发报错

• 先初始化全局样式，清除页面默认边距、隐藏多余滚动条，给SVG设置固定定位实现真正的满屏占比
• 统一把所有地图内容归集到同一个变换控制的g节点下，避免多节点操作导致的交互错位
• 动态匹配视口尺寸，结合缩放范围调整平移边界，确保任意缩放级别下内容都不会被拖出可视区
• 适配高版本d3的事件传参规则，替换废弃的全局事件引用

// 动态获取视口宽高，替换硬编码的固定尺寸
const width = window.innerWidth;
const height = window.innerHeight;

// 页面基础样式初始化
d3.select('body')
  .style('margin', 0)
  .style('overflow', 'hidden')

d3.xml('assets/world.svg', (data) => {
  // 处理导入的SVG资源，设置满屏属性
  const mapSvg = d3.select(data.documentElement)
    .attr('id', 'svgMap')
    .attr('width', width)
    .attr('height', height)
    .style('position', 'fixed')
    .style('top', 0)
    .style('left', 0)
  
  // 把SVG挂载到页面上
  d3.select('body').node().append(mapSvg.node())

  // 新建统一管控变换的g节点
  const transformGroup = mapSvg.append('g')
  // 把原AI导出结构里的地图内容迁移到统一变换组内
  const originalMap = mapSvg.select('#gElem').node()
  transformGroup.node().append(originalMap)

  // 配置缩放交互规则
  const zoom = d3.zoom()
    .scaleExtent([1, 2]) // 保留原有1-2倍的缩放范围
    .translateExtent([[0, 0], [width, height]]) // 绑定可视区为平移边界
    .on('zoom', (event) => {
      // 从事件入参获取变换值，替代旧版的d3.event
      transformGroup.attr('transform', event.transform)
    })

  // 把缩放行为绑定到SVG根节点
  mapSvg.call(zoom)
})

补充提示：如果AI导出的SVG自带viewBox属性，需要在初始化时先移除该属性，避免和自定义的变换逻辑产生冲突。如果平移时还是存在轻微溢出，可以把translateExtent的边界值结合当前缩放倍率做动态计算，彻底锁死内容移动范围。

内容的提问来源于stack exchange，提问作者AnHa