如何在SVG重叠形状上触发多个元素的:hover效果？

我太懂这种困扰了——默认的SVG交互逻辑只会把鼠标事件派发给最上层的元素，纯CSS根本没法让重叠元素的交集区域同时触发各自的hover效果。结合你用React的场景，给你两个可行的方案：

方案一：利用SVG原生API检测鼠标下的所有元素 #

这个方法借助SVG的getIntersectionList API，能精准获取鼠标位置覆盖的所有SVG元素，然后通过动态添加类来模拟hover状态：

步骤1：修改React组件逻辑 #

import { useRef, useEffect, useState } from 'react';

export default function SVGTest() {
  const svgRef = useRef(null);
  const [hoveredElements, setHoveredElements] = useState([]);

  // 监听鼠标移动，获取所有命中的椭圆元素
  const handleMouseMove = (e) => {
    if (!svgRef.current) return;
    
    // 将鼠标的屏幕坐标转换为SVG内部坐标
    const screenPoint = svgRef.current.createSVGPoint();
    screenPoint.x = e.clientX;
    screenPoint.y = e.clientY;
    const svgPoint = screenPoint.matrixTransform(svgRef.current.getScreenCTM().inverse());
    
    // 获取该坐标点覆盖的所有SVG元素
    const hitElements = svgRef.current.getIntersectionList(
      new DOMRect(svgPoint.x, svgPoint.y, 1, 1),
      null
    );
    
    // 过滤出我们需要的三个椭圆元素
    const targetEllipses = Array.from(hitElements).filter(el => 
      ['left', 'middle', 'right'].includes(el.className)
    );
    
    setHoveredElements(targetEllipses);
  };

  // 鼠标离开SVG时清空hover状态
  const handleMouseLeave = () => {
    setHoveredElements([]);
  };

  // 动态给命中元素添加/移除hover类
  useEffect(() => {
    const allEllipses = svgRef.current?.querySelectorAll('.left, .middle, .right');
    allEllipses?.forEach(el => {
      if (hoveredElements.includes(el)) {
        el.classList.add('is-hover');
      } else {
        el.classList.remove('is-hover');
      }
    });
  }, [hoveredElements]);

  return (
    <svg 
      ref={svgRef}
      className="test" 
      width="500px" 
      height="500px"
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    >
      <g name="Layer" className="group">
        <ellipse className="left" cx="120" cy="160" rx="80" ry="81" />
        <ellipse className="right" cx="342" cy="271" rx="93" ry="97" />
        <ellipse className="middle" cx="223" cy="176" rx="115" ry="153" />
      </g>
    </svg>
  );
}

步骤2：修改CSS样式 #

把原来的:hover伪类替换为我们自定义的is-hover类，同时关闭默认的pointer-events避免冲突：

.left { fill: yellow; pointer-events: none; }
.left.is-hover { opacity: 0.3; }

.middle { fill: red; pointer-events: none; }
.middle.is-hover { opacity: 0.8; }

.right { fill: blue; pointer-events: none; }
.right.is-hover { opacity: 0.6; }

方案二：手动计算鼠标是否在椭圆内部 #

如果你的SVG元素不多，也可以用椭圆的数学公式手动检测命中状态，兼容性更好，也更灵活：

修改handleMouseMove函数即可：

const handleMouseMove = (e) => {
  if (!svgRef.current) return;
  
  const screenPoint = svgRef.current.createSVGPoint();
  screenPoint.x = e.clientX;
  screenPoint.y = e.clientY;
  const svgPoint = screenPoint.matrixTransform(svgRef.current.getScreenCTM().inverse());
  
  const allEllipses = svgRef.current.querySelectorAll('.left, .middle, .right');
  const hovered = [];
  
  allEllipses.forEach(el => {
    // 获取椭圆的圆心、半径参数
    const cx = parseFloat(el.getAttribute('cx'));
    const cy = parseFloat(el.getAttribute('cy'));
    const rx = parseFloat(el.getAttribute('rx'));
    const ry = parseFloat(el.getAttribute('ry'));
    
    // 椭圆命中检测公式：((x - cx)/rx)² + ((y - cy)/ry)² ≤ 1
    const dx = (svgPoint.x - cx) / rx;
    const dy = (svgPoint.y - cy) / ry;
    if (dx * dx + dy * dy <= 1) {
      hovered.push(el);
    }
  });
  
  setHoveredElements(hovered);
};

为什么原来的pointer-events没用？ #

pointer-events: visible只是让元素可以接收鼠标事件，但浏览器的事件分发机制只会把事件传递给视觉层级最上层的元素，没办法同时触发多个元素的:hover伪类。所以必须通过JS手动检测所有元素的命中状态，才能实现交集区域多元素同时响应的效果。

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