如何为SVG元素组实现选择性鼠标悬停缩放效果？

当然可以实现这个定制化的悬停缩放需求啦！我给你准备了两种可行方案，你可以根据自己的场景选择：

JavaScript方案（推荐，无需调整SVG结构） #

这个方案不需要修改原有SVG元素的顺序，通过JS监听鼠标事件来精准控制需要放大的元素，逻辑清晰且灵活。

实现步骤： #

1. 给所有SVG图形元素添加统一的类名，方便批量操作；
2. 定义基础的过渡动画和缩放样式类；
3. 监听每个图形的mouseenter和mouseleave事件：
   • 鼠标进入时，先移除所有元素的缩放样式，再根据当前悬停的元素，给指定元素添加缩放类；
   • 鼠标离开时，移除所有元素的缩放样式。

完整代码： #

/* 基础样式：过渡动画和变换原点 */
.shape {
  transition: all .4s;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* 缩放样式类 */
.zoomed {
  transform: scale(1.2);
}

<svg width="500" height="500">
  <g id="all_shapes">
    <rect id="square" class="shape" x="20" y="20" width="100" height="100" fill="blue"/>
    <circle id="circle" class="shape" cx="170" cy="45" r="25" fill="red" />
    <ellipse id="ellipse" class="shape" cx="170" cy="100" rx="40" ry="25" fill="green" />
  </g>
</svg>

// 获取所有图形元素和特定元素
const shapes = document.querySelectorAll('.shape');
const square = document.getElementById('square');
const circle = document.getElementById('circle');
const ellipse = document.getElementById('ellipse');

// 给每个图形绑定事件
shapes.forEach(shape => {
  // 鼠标进入时应用缩放
  shape.addEventListener('mouseenter', () => {
    // 先清空所有元素的缩放状态
    shapes.forEach(s => s.classList.remove('zoomed'));
    
    if (shape.id === 'square') {
      // 悬停矩形：三个元素都放大
      shapes.forEach(s => s.classList.add('zoomed'));
    } else if (shape.id === 'circle') {
      // 悬停圆形：矩形和圆形放大
      square.classList.add('zoomed');
      circle.classList.add('zoomed');
    } else if (shape.id === 'ellipse') {
      // 悬停椭圆：矩形和椭圆放大
      square.classList.add('zoomed');
      ellipse.classList.add('zoomed');
    }
  });

  // 鼠标离开时移除所有缩放
  shape.addEventListener('mouseleave', () => {
    shapes.forEach(s => s.classList.remove('zoomed'));
  });
});

纯CSS方案（需调整SVG元素顺序） #

如果偏好纯CSS实现，由于CSS只能选择后续兄弟元素，我们需要调整SVG中元素的DOM顺序（把蓝色矩形放在最后），才能通过兄弟选择器控制前面的元素。

完整代码： #

.zoom * {
  transition: all .4s;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* 悬停矩形：所有元素放大 */
#square:hover, #square:hover ~ * {
  transform: scale(1.2);
}

/* 悬停圆形：圆形和矩形放大 */
#circle:hover, #circle:hover ~ #square {
  transform: scale(1.2);
}

/* 悬停椭圆：椭圆和矩形放大 */
#ellipse:hover, #ellipse:hover ~ #square {
  transform: scale(1.2);
}

<!-- 调整元素顺序，把矩形放在最后 -->
<svg width="500" height="500">
  <g id="all_shapes" class="zoom">
    <circle id="circle" cx="170" cy="45" r="25" fill="red" />
    <ellipse id="ellipse" cx="170" cy="100" rx="40" ry="25" fill="green" />
    <rect id="square" x="20" y="20" width="100" height="100" fill="blue"/>
  </g>
</svg>

两种方案都能完美实现你需要的交互效果，根据自己的实际需求选择就好啦！

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