IONIC 3中TS函数加载SVG及点击事件问题求助

我来帮你一步步拆解并解决这个问题，你遇到的两个核心问题其实都是SVG通过<object>加载时的文档上下文隔离和加载时机导致的：

为什么直接在SVG里写onclick会报错？ #

当用<object>标签加载SVG时，这个SVG会运行在一个独立的文档上下文中——简单说就是，HTML页面里定义的btnClicked()函数，并不在SVG的全局作用域里，所以点击时自然会提示“函数未定义”。这种情况下，不能直接在SVG代码里写onclick，得通过外部的TS代码来绑定事件。

如何正确获取SVG内容并绑定点击事件（TS实现） #

你之前在ionViewDidLoad里直接获取contentDocument无效，是因为此时SVG很可能还没加载完成。必须等待<object>的load事件触发后，才能安全访问SVG的内部内容。下面是完整的实现方案：

1. 先调整HTML模板 #

确保<object>标签有明确的ID，方便后续获取：

<ion-scroll scrollX="false" scrollY="true" zoom="true" maxZoom="10"> 
  <object id="svgDwg" data="assets/svgs/file.svg" type="image/svg+xml" style="width:400%;"></object> 
</ion-scroll>

2. 在TS文件中实现逻辑 #

选择ionViewDidEnter钩子（比ionViewDidLoad更适合处理DOM加载完成后的操作），监听<object>的load事件，再进行SVG内容的操作：

ionViewDidEnter() {
  const svgObject = document.getElementById('svgDwg') as HTMLObjectElement;
  
  // 监听SVG加载完成的事件
  svgObject.addEventListener('load', () => {
    // 获取SVG的文档对象
    const svgDoc = svgObject.contentDocument;
    if (!svgDoc) {
      console.error('无法获取SVG文档，可能是跨域问题或加载失败');
      return;
    }

    // 筛选出所有ID以PI开头的元素
    const piElements = svgDoc.querySelectorAll('[id^="PI"]');
    
    // 给每个元素绑定点击事件
    piElements.forEach(element => {
      element.addEventListener('click', (event) => {
        // 这里写你的点击逻辑，比如调用自定义的事件处理函数
        this.btnEvent(event);
        console.log('点击了元素:', (event.target as Element).id);
      });
    });
  });
}

// 自定义的事件处理函数
btnEvent(event: Event) {
  // 在这里编写你的点击处理逻辑
  console.log('触发点击事件', event);
}

关键注意事项 #

• 加载时机：必须等<object>的load事件触发后再访问contentDocument，否则会得到null。
• 跨域限制：如果SVG是从外部域名加载的，会存在跨域问题，此时无法访问contentDocument。确保SVG是放在本地assets目录下的资源。
• TS类型断言：要把getElementById的结果断言为HTMLObjectElement，这样才能正确访问contentDocument属性。

这样就能完美解决你的问题：既不用在SVG里写onclick，也能准确获取到SVG内的目标元素并绑定点击事件啦。

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