如何捕获iframe中外部SVG路径的hover/点击事件？

方案1：放弃iframe，直接嵌入SVG到DOM（推荐） #

iframe的上下文隔离会增加事件处理的复杂度，直接将SVG嵌入页面是最简单的方式：

• 将SVG作为React组件导入：借助webpack的svg-react-loader等工具，把SVG文件转成React组件，直接在代码中使用，然后给每个<path>元素添加onClick、onMouseEnter、onMouseLeave事件，比如：

import MyMap from './map.svg';

function MapComponent() {
  const handlePathClick = (pathId) => {
    console.log('点击了路径：', pathId);
  };

  const handlePathHover = (pathId, isEnter) => {
    console.log(isEnter ? `进入路径：${pathId}` : `离开路径：${pathId}`);
  };

  return (
    <div className='mapContainer'>
      <MyMap 
        onClick={(e) => {
          if (e.target.tagName === 'PATH') {
            handlePathClick(e.target.id);
          }
        }}
        onMouseEnter={(e) => {
          if (e.target.tagName === 'PATH') {
            handlePathHover(e.target.id, true);
          }
        }}
        onMouseLeave={(e) => {
          if (e.target.tagName === 'PATH') {
            handlePathHover(e.target.id, false);
          }
        }}
      />
    </div>
  );
}

• 用dangerouslySetInnerHTML插入SVG内容：如果无法转成组件，可读取SVG文件的文本内容，插入到页面后通过DOM操作绑定事件：

import { useRef, useEffect } from 'react';
import mapSvgText from './map.svg?raw'; // 借助raw-loader读取文本

function MapComponent() {
  const svgContainerRef = useRef(null);

  useEffect(() => {
    const container = svgContainerRef.current;
    if (!container) return;

    const paths = container.querySelectorAll('path');
    paths.forEach(path => {
      path.addEventListener('click', () => console.log('点击路径：', path.id));
      path.addEventListener('mouseenter', () => {
        path.style.fill = '#ff4444'; // hover时改变样式
      });
      path.addEventListener('mouseleave', () => {
        path.style.fill = '#原填充色'; // 恢复原样式
      });
    });
  }, []);

  return (
    <div className='mapContainer'>
      <div 
        ref={svgContainerRef}
        dangerouslySetInnerHTML={{ __html: mapSvgText }}
      />
    </div>
  );
}

方案2：同域下操作iframe内的SVG内容 #

如果必须保留iframe，且SVG文件和主页面同域，可以在iframe加载完成后，获取其内部的DOM并绑定事件：

import { useRef, useEffect } from 'react';

function MapComponent() {
  const iframeRef = useRef(null);

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;

    const handleIframeLoad = () => {
      const svgDoc = iframe.contentDocument;
      const paths = svgDoc.querySelectorAll('path');
      
      paths.forEach(path => {
        // 绑定点击事件
        path.addEventListener('click', () => {
          console.log('点击路径：', path.id);
          // 这里添加你的业务逻辑
        });

        // 绑定hover事件
        path.addEventListener('mouseenter', () => {
          path.setAttribute('fill', '#ff4444');
        });
        path.addEventListener('mouseleave', () => {
          path.setAttribute('fill', '#原本的填充色');
        });
      });
    };

    iframe.addEventListener('load', handleIframeLoad);
    // 组件卸载时移除监听
    return () => iframe.removeEventListener('load', handleIframeLoad);
  }, []);

  return (
    <div className='mapContainer'>
      <iframe 
        ref={iframeRef}
        src={map} 
        title="map" 
        width="400" 
        height="300" 
        frameBorder="none"
      />
    </div>
  );
}

注意：浏览器同源策略会阻止跨域操作iframe内容，只有SVG和主页面协议、域名、端口完全一致时才能使用此方法。

方案3：跨域场景下通过postMessage通信 #

如果SVG文件和主页面跨域，无法直接操作iframe内的DOM，可以在SVG内部添加事件逻辑，通过postMessage和主页面通信：

1. 修改SVG文件，添加内部脚本处理事件并发送消息：

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300">
  <script type="text/javascript">
    document.querySelectorAll('path').forEach(path => {
      // 点击事件
      path.addEventListener('click', () => {
        window.parent.postMessage({
          type: 'PATH_CLICK',
          pathId: path.id
        }, '*'); // 可以替换为你的主页面域名，提升安全性
      });

      // hover事件
      path.addEventListener('mouseenter', () => {
        path.style.fill = '#ff4444';
        window.parent.postMessage({
          type: 'PATH_HOVER',
          pathId: path.id,
          state: 'enter'
        }, '*');
      });

      path.addEventListener('mouseleave', () => {
        path.style.fill = '#原填充色';
        window.parent.postMessage({
          type: 'PATH_HOVER',
          pathId: path.id,
          state: 'leave'
        }, '*');
      });
    });
  </script>
  <!-- 你的5个path元素 -->
</svg>

2. 主页面React组件中监听message事件接收消息：

import { useEffect } from 'react';

function MapComponent() {
  useEffect(() => {
    const handleMessage = (event) => {
      // 建议验证event.origin，只接收可信域名的消息，比如：
      // if (event.origin !== 'https://你的SVG域名.com') return;

      switch(event.data.type) {
        case 'PATH_CLICK':
          console.log('点击路径：', event.data.pathId);
          // 处理点击逻辑
          break;
        case 'PATH_HOVER':
          const action = event.data.state === 'enter' ? '进入' : '离开';
          console.log(`${action}路径：`, event.data.pathId);
          // 处理hover逻辑
          break;
      }
    };

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  return (
    <div className='mapContainer'>
      <iframe 
        src={map} 
        title="map" 
        width="400" 
        height="300" 
        frameBorder="none"
      />
    </div>
  );
}

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