如何为矩形上的文本添加 SVG 悬停事件?

How to add an SVG hover event for text on a rectangle?

我有一个包含多个包含文本的矩形的 SVG。将鼠标悬停在矩形上时,我想要一个小阴影。由于不能在 rect 元素内添加文本,我在之后添加了它,这意味着文本实际上显示在矩形的顶部,所以当我将鼠标悬停在文本上时,不会显示阴影。

由于文本在矩形之后,我不能使用兄弟选择器。我也尝试过使用一个组,但没有成功。这是我试图获得的一小部分 JSfiddle(和代码)。

<svg viewBox="0 0 100 100">
  <defs>
    <style>
      .slip {
        fill: blue;
      }
      .st {
        fill: white;
      }
      .slip:hover {
        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">
    <rect class="slip" x="10" y="10" width="80" height="50"/>
    <text class="st" x="20" y="30">1000</text>
  </g>
</svg>

将文本设置为 pointer-events: none;

<svg viewBox="0 0 100 100">
  <defs>
    <style>
      .slip {
        fill: blue;
      }
      .st {
        fill: white;
        pointer-events: none;
      }
      .slip:hover {
        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">
    <rect class="slip" x="10" y="10" width="80" height="50"/>
    <text class="st" x="20" y="30">1000</text>
  </g>
</svg>