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

【问题标题】：How to add an SVG hover event for text on a rectangle?如何为矩形上的文本添加 SVG 悬停事件？
【发布时间】：2021-10-18 22:32:54
【问题描述】：

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

由于文本在 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>

【问题讨论】：

@RobertLongson 太棒了，成功了！！如果您想将此添加为答案，请让我将其标记为正确答案！非常感谢！

标签： svg hover

【解决方案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>

【讨论】：