如何实现SVG中悬停大矩形联动缩放其他关联矩形的交互效果

需求说明 #

• 交互逻辑：鼠标悬停大尺寸矩形时，大矩形自身触发缩放动画，同步带动另外两个小尺寸矩形完成同等缩放效果；无需实现小矩形悬停反向触发大矩形缩放的逻辑。

当前故障表现 #

• 两个小矩形自身悬停时，可正常触发对应缩放动画
• 鼠标悬停大矩形时，既无自身缩放效果，也无联动小矩形的效果
• 参照普通HTML元素的兄弟选择器写法编写的联动规则，在SVG场景下完全不生效

核心失效原因 #

经过含数千行g元素的复杂SVG项目实际验证，功能失效的核心是CSS兄弟选择器的天然匹配限制：通用兄弟选择符~只能匹配书写在触发元素后方的同层级兄弟节点，无法反向匹配写在触发元素前方的兄弟。
之前的判断误区：误以为CSS层叠规则可以跨书写顺序匹配，实际上原SVG结构里，lower_element小矩形分组写在top大矩形分组的前面，相当于小矩形是大矩形的前置兄弟，.top:hover ~ .lower_element从DOM顺序上就根本匹配不到目标元素。
另外存在低级代码bug：原选择器里类名拼写错误，把带下划线的lower_element写成了带连字符的lower-element，就算DOM顺序调整正确，也会因为类名不匹配完全不生效。

修正方案 #

• 调整SVG的DOM书写顺序：将带top类的大矩形分组，移动到lower_element小矩形分组的最前方，保证小矩形是紧跟在大矩形分组后面的同层级兄弟节点
• 修正选择器的类名拼写错误，去掉冗余的多层:hover嵌套，直接编写联动规则，参考实现代码如下：

  /* 全局基础样式 */
  svg {
      height: 220px;
      width: 400px;
      background: grey;
  }
  
  /* 元素公共变换配置，保证缩放位置不偏移 */
  .lower_element, .top {
      fill: blue;
      transform-origin: center;
      transform-box: fill-box;
      transition-duration: 0.1s;
  }
  
  /* 保留小矩形自身悬停缩放的原有逻辑 */
  .lower_element:hover {
      transform: scale(1.7);
  }
  
  /* 大矩形悬停效果：自身缩放 + 同步联动后方小矩形缩放 */
  .top:hover {
      transform: scale(1.7);
  }
  .top:hover ~ .lower_element {
      transform: scale(1.7);
  }
  

• 注意：必须保留transform-box: fill-box配置，否则SVG元素的变换原点会默认参考整个SVG画布，缩放时会出现严重的位置偏移。

内容的提问来源于stack exchange，提问作者Liepājas Liedaga vidusskola