点击SVG text元素区域名称无法跳转页面，如何按代码坐标实现跳转

核心逻辑是直接取用你已经配置在<text>标签上的属性参数，不需要依赖点击时的鼠标坐标，参数更准确稳定，完整实现步骤如下：

• 第一步：改造点击事件逻辑，将区域标识、坐标参数通过路由传递给/map页面

onMouseText(event: MouseEvent) {
  // 获取当前点击的text元素
  const targetEl = event.currentTarget as SVGTextElement;
  // 取元素上绑定的区域缩写
  const shortName = targetEl.getAttribute('shortName');
  // 取元素上预先配置的业务坐标，比点击鼠标坐标更准确
  const textX = targetEl.getAttribute('x');
  const textY = targetEl.getAttribute('y');

  // 方式1：参数带在地址栏，刷新页面后仍可保留定位状态
  this.router.navigate(['/map'], {
    queryParams: {
      district: shortName,
      x: textX,
      y: textY
    }
  });

  // 方式2：参数不暴露在地址栏，适合不需要持久化的场景
  // this.router.navigate(['/map'], {
  //   state: {
  //     district: shortName,
  //     x: textX,
  //     y: textY
  //   }
  // });
}

• 第二步：在/map页面接收路由参数，执行对应区域定位逻辑

// map页面对应的ts文件
import { ActivatedRoute } from '@angular/router';
// 其他按需引入的依赖

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // 对应上方传参方式1，读取地址栏query参数
  this.route.queryParams.subscribe(params => {
    const district = params['district'];
    const x = params['x'];
    const y = params['y'];
    if (district && x && y) {
      // 调用你的地图定位方法，比如移动视野到对应坐标、加载对应区域图层
      this.locateToDistrict(district, Number(x), Number(y));
    }
  });

  // 对应上方传参方式2，读取state参数
  // const navigation = this.router.getCurrentNavigation();
  // const state = navigation?.extras?.state;
  // if (state) {
  //   const district = state['district'];
  //   const x = state['x'];
  //   const y = state['y'];
  //   this.locateToDistrict(district, Number(x), Number(y));
  // }
}

// 自定义定位方法，根据你使用的地图组件实现对应逻辑即可
locateToDistrict(districtCode: string, x: number, y: number) {
  // 示例：如果是自定义SVG地图可调整viewport到对应坐标
  // 如果是第三方地图（百度/高德/谷歌）调用对应API的panTo方法移动中心点
  // 也可直接通过districtCode匹配预设的区域配置，直接加载对应区域内容
}

说明：你原代码中取的event.clientX是鼠标相对于浏览器窗口的屏幕坐标，不是地图业务坐标，直接使用你预先写在<text>标签上的坐标和区域标识，逻辑更稳定，不会因为点击位置偏差出现参数错误。

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