Display Text Over SVG Element On Hover
Question
So I have a simple SVG element (copied below), and I want to display text (currently within the data-label attribute) when the rectangle with the bar class is hovered over.
<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>
There could be any number of rectangles in the SVG and the label could say anything.
Since in my situation, the entire SVG element is created in JavaScript and then printed to a HTML environment, I am able to move the label anywhere. I just want the label to appear over the rectangle or above it when hovered.
Is this at all possible, since you cannot include text within the <rect> element?
4 answers
solution1
15 ACCPTED 2017-01-20 17:17:05
Something like this? You can use g to group elements.
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>
solution2
1 2017-01-20 19:36:54
Try this, I think is more convenient way to do it:
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>
solution3
0 2020-02-24 03:34:46
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>
solution4
-2 2019-09-23 02:30:35
Another way to solve your problem:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.