SVG要素上のテキストを表示上に表示

Question

barクラスの矩形を上に置いたときに、単純なSVG要素（下にコピーされています）があり、現在は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>