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

Question

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

Answer 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>

Answer 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>

Answer 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>

Answer 4

解决问题的另一种方法：

 rect:hover + text{ display :block }

 <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> <text style="display:none" x="0" y="15">Label 1</text> </svg>

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

问题描述

4 个解决方案

解决方案1
15 已采纳 2017-01-20 17:17:05

解决方案2
1 2017-01-20 19:36:54

解决方案3
0 2020-02-24 03:34:46

解决方案4
-2 2019-09-23 02:30:35

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

问题描述

4 个解决方案

解决方案1 15 已采纳 2017-01-20 17:17:05

解决方案2 1 2017-01-20 19:36:54

解决方案3 0 2020-02-24 03:34:46

解决方案4 -2 2019-09-23 02:30:35

解决方案1
15 已采纳 2017-01-20 17:17:05

解决方案2
1 2017-01-20 19:36:54

解决方案3
0 2020-02-24 03:34:46

解决方案4
-2 2019-09-23 02:30:35