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

Question

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

16

我有一个简单的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>元素中包含文本？

- Spedwards

5

为什么不直接在矩形元素内创建一个标题子元素，把文本放进去呢？这样会显示为工具提示。 - Robert Longson

如果您只想显示工具提示，可以在svg标记内添加<title>your title</title>。https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title - buncis

3个回答

1

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>

- mugu

嗨，你觉得这会起作用吗？你能否编辑你的帖子并添加一些解释呢？ - Ali

嗨，这是我在Stack Overflow上的第一个回答，所以我对评论面板不是很熟悉。我只是添加了一个div目标，并将属性“title”设置为我想要的文本。你可以去MDN获取更多信息。由于我正在学习英语，请原谅我在理解方面的错误。 - mugu

1

试一下这个，我认为这是更方便的做法：

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>

- Sean Bean

1

不确定为什么这个被点踩。是的，它很啰嗦，但它确实可行。但是，回答可能会更有帮助，如果解释了使用 visibility:... 而不是 display:... 的可能优势。 - matt wilkie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- shipshape · Accepted Answer

像这样？您可以使用 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>