web-dev-qa-db-ja.com

ホバー時にSVG要素の上にテキストを表示する

したがって、単純な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>要素内にテキストを含めることはできないので、これはまったく可能ですか？

javascripthtmlcsssvg
6
Spedwards

このようなもの？ 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>
9
shipshape

これを試してください、私はそれを行うためのより便利な方法だと思います：

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>
1
Alexa Simbi
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>
0
mugu

問題を解決する別の方法：

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