如何实现SVG中矩形及其上方文本悬停时均触发矩形阴影效果

问题核心是text元素层级高于rect，会拦截鼠标事件，导致rect的hover状态无法触发，可选用以下任意一种方案解决：

方案一：绑定悬停效果到父级g容器（推荐） #

你之前使用g标签分组未生效，是因为没有将hover选择器绑定到g元素上。悬停在g容器的任意子元素（包括rect和text）都会触发g的hover状态，适配后续新增交互的扩展性更强。
修改后的完整代码如下：

<svg viewBox="0 0 100 100">
  <defs>
    <style>
      .slip {
        fill: blue;
      }
      .st {
        fill: white;
      }
      /* hover选择器绑定到父级g的类上 */
      .slip-group:hover .slip {
        cursor: pointer;
        -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
        filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
      }
    </style>
  </defs>
  <g id="slips">
    <!-- 给每组矩形+文本套上带类的g容器 -->
    <g class="slip-group">
      <rect class="slip" x="10" y="10" width="80" height="50"/>
      <text class="st" x="20" y="30">1000</text>
    </g>
  </g>
</svg>

方案二：设置文本不响应鼠标事件 #

如果不需要给文本单独加交互，可以直接给text元素添加pointer-events: none属性，让鼠标事件直接穿透文本触发下方rect的hover效果，无需改动结构。
仅需要修改对应的css规则即可：

.st {
  fill: white;
  /* 新增该属性，让文本不拦截鼠标事件 */
  pointer-events: none;
}

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