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

Question

我有一个包含多个包含文本的矩形的 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>

Answer 1

将文本设置为 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>

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

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

svg

hover