无法在 SVG 鼠标悬停时显示文本

【问题标题】：Unable to show text on mouse over of SVG无法在 SVG 鼠标悬停时显示文本
【发布时间】：2021-04-29 20:41:52
【问题描述】：

每当用户使用 CSS 或 JS 将鼠标悬停在 svg 元素（在我的情况下为矩形）上时，我都会尝试仅显示文本。

 <svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
  <text class="img__description" x="50" y="100" font-family="Verdana" font-size="35" fill="blue">Hello</text>
</svg>

我将不胜感激。

【问题讨论】：

标签： javascript css svg

【解决方案1】：

您可以将 css 样式添加到 svg 的元素中，例如display: none.

工作示例：

svg:hover rect {
    display: none;
}

svg text {
    display: none;
}

svg:hover text {
    display: block;
}

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
    style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"
  />
  <text class="img__description" x="50" y="100" font-family="Verdana" font-size="35" fill="blue">Hello</text>
</svg>

【讨论】：