问题描述
因此,我有一个简单的SVG元素(在下面复制),并且当将具有bar
类的矩形悬停在上方时,我想显示文本(当前在data-label
属性内).
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>
SVG中可以有任意数量的矩形,并且标签可以显示任何内容.
There could be any number of rectangles in the SVG and the label could say anything.
由于我的情况,整个SVG元素都是用JavaScript创建的,然后打印到HTML环境中,因此我可以将标签移动到任何地方.我只希望标签在悬停时显示在矩形上方或上方.
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.
这是不可能的,因为您不能在<rect>
元素内包含文本吗?
Is this at all possible, since you cannot include text within the <rect>
element?
推荐答案
是这样的吗?您可以使用g对元素进行分组.
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>
这篇关于在悬停时通过SVG元素显示文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!