Text Über SVG-Element Auf Hover

Also ich habe eine einfache SVG-element (unten kopiert), und ich möchte, um text anzuzeigen (die derzeit innerhalb der data-label Attribut), wenn das Rechteck mit der bar Klasse schwebte über.

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

Es könnte eine beliebige Anzahl von Rechtecken, die in der SVG und dem label etwas sagen konnte.

Da in meiner situation, das gesamte SVG-element ist in JavaScript erstellt und dann gedruckt, um eine HTML-Umgebung, ich bin in der Lage zu bewegen, das label überall. Ich will nur die Beschriftung über dem Rechteck oder oben, wenn schwebte.

Ist, ist das überhaupt möglich, da Sie nicht den text innerhalb des <rect> element?

  • Warum nicht erstellen Sie einfach einen Titel child-element, das Rechteck mit dem text? Das erscheint dann als tooltip angezeigt wird.
InformationsquelleAutor Spedwards | 2017-01-20
  1. 8

    So etwas? Sie können g zum gruppieren von Elementen.

    CSS:

    svg text {display: none;}
svg g:hover text {display: block;}

    HTML:

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

    • Wenn Sie wollen einfach nur ein text-element erscheinen, schweben, können Sie verzichten auf die Gruppe, und legen Sie svg text {opacity:0;}, svg text:hover {opacity:1;} zu vermeiden, die hover - Ereignis nicht ausgelöst wird, auf nicht-angezeigten text.
    • Wie hätte ich der text erscheint am unteren Rand des Bildschirms oder irgendwo nicht auf der Oberseite des Rechtecks. Gibt es eine Möglichkeit, ich kann angeben, wo wird es auftauchen?
    InformationsquelleAutor shipshape
  2. 1

    Versuchen, diese, ich denke, das ist mehr bequemer Weg, es zu tun:

    CSS:

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

    HTML:

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

    • Nicht sicher, warum dies so war downvoted. Ja, es ist ausführlich aber es funktioniert. Die Antwort könnte davon profitieren, erklären den möglichen Vorteil der Verwendung von visibility:... statt display:... obwohl.
    InformationsquelleAutor Alexa Simbi
  3. 0

    Anderen Weg, um Ihr problem zu lösen:

    CSS:

    	rect:hover + text{
		display :block
	}

    HTML:

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

    InformationsquelleAutor 14714
Schreibe einen Kommentar