悬停时在 SVG 元素上显示文本答案

【问题标题】：Display Text Over SVG Element On Hover悬停时在 SVG 元素上显示文本
【发布时间】：2026-02-18 12:05:01
【问题描述】：

所以我有一个简单的 SVG 元素（复制如下），当带有 bar 类的矩形悬停在上方时，我想显示文本（当前在 data-label 属性内）。

<svg width="511" height="15">
    <rect fill="#555555" height="15" stroke="#000000" width="510"></rect>
    <rect class="bar" x="2" y="2" width="434" height="11" fill="#97C115" data-label="Test-Label"></rect>
</svg>

SVG 中可以有任意数量的矩形，标签可以说明任何内容。

因为在我的情况下，整个 SVG 元素是用 JavaScript 创建的，然后打印到 HTML 环境中，我可以将标签移动到任何地方。我只是希望标签在悬停时出现在矩形上方或上方。

这是否可能，因为您不能在 <rect> 元素中包含文本？

【问题讨论】：

为什么不简单地为包含文本的矩形创建一个标题子元素？这将显示为工具提示。

标签： javascript html css svg

【解决方案1】：

这样的？您可以使用 g 对元素进行分组。

svg text {display: none;}
svg g:hover text {display: block;}

<svg width="511" height="15">
    <rect fill="#555555" height="15" stroke="#000000" width="510"></rect>
    <g>
      <rect class="bar" x="2" y="2" width="434" height="11" fill="#97C115" data-label="Test-Label"></rect>
      <text x="0" y="15">Label 1</text>
    </g>
</svg>

【讨论】：

如果你只是想让一个文本元素出现在悬停时，你可以省略组并设置svg text {opacity:0;}，svg text:hover {opacity:1;}以避免hover事件在非显示文本上不被触发.
如何让文本出现在屏幕底部或不在矩形顶部的某个位置。有什么方法可以指定它的显示位置吗？

【解决方案2】：

试试这个，我认为这样做更方便：

nav {
    position: absolute;
    top:-11px;
}

ul {
    position: relative;
}
nav li {
    display:inline;
}
nav a {
    display:inline-block;
    visibility: hidden;
    padding-right:5px;
    text-decoration:none;
    color: white;
}
ul li:hover a {
    visibility:visible;
}

<svg width="511" height="15">
  <rect fill="#555555" height="15" stroke="#000000" width="510"></rect>
  <rect class="bar" x="2" y="2" width="434" height="11" fill="#97C115" data-label="Test-Label"></rect>
</svg>
<nav>
  <ul>
   <li><a href="#">text_one</a></li>
   <li><a href="#">text_two</a></li>
   <li><a href="#">text_three</a></li>
  </ul>
</nav>

【讨论】：

不知道为什么这被否决了。是的，它很冗长，但确实有效。答案可以从解释使用 visibility:... 而不是 display:... 的可能优势中受益。

【解决方案3】：

div>svg:hover {
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.589);
  transform: scale(1.2);
  transition: all 0.2s ease-in-out;
}

div>svg {
  margin: 10px 14px;
  padding: 8px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

<html>
<script src="//at.alicdn.com/t/font_1652933_iyos793o7jk.js"></script>

<body>
  <div title="?mypen">
    <svg id='drawpen' class="ative" aria-hidden="true">
       <use xlink:href="#icon-huabi"></use>
   </svg><br>
  </div>
</body>
</html>

【讨论】：

嗨，为什么你认为这会起作用？你能编辑你的帖子并添加一些解释吗？
嗨，这是我对堆栈溢出的第一个答案，所以我对评论面板不太熟悉。我只是添加一个 div 目标并将属性“标题”设置为我想要的文本。你可以去 mdn 了解更多信息。由于我是学英语的，请原谅我的理解错误。