在悬停时通过SVG元素显示文本

Question

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

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