HTML SVG: Zeige Element über alle Elemente

Ich erstellte ein SVG-Diagramm, fügte ich einen Tooltip, der den entsprechenden Wert zeigt, wenn die Maus schwebt.HTML SVG: Zeige Element über alle Elemente

Das Problem ist, da der Pfad nach dem Erstellen der Balken gerendert wird, wird der Tooltip hinter dem Pfad http://take.ms/lljq3 angezeigt. Was ich brauche ist, dass der Tooltip immer vor allem steht.

Ich versuche z-index:-1; position: relative; zu den path und z-index:999; position: fixed; zu text hinzuzufügen, funktioniert aber nicht.

Siehe Beispiel hier: https://jsfiddle.net/sgcw8btx/

Quelle

2016-08-12 zetacu

Wenn SVG-Elemente erstellen, folgende Regel applys:

3,3 Rendering Bestellen

Elemente in einem SVG-Dokumentfragment haben eine implizite Darstellungsreihenfolge, mit der erste Elemente im SVG-Dokumentfragment werden zuerst "gemalt". Nachfolgende Elemente werden auf zuvor bemalte Elemente gemalt.

Ist es nicht möglich, das Tooltip-Element vor dem Balken/der Linie zu platzieren? Sonst könnten Sie versuchen zu verwenden?

<use xlink:href="#id" />

Und Sie könnten versuchen, den HTML-Code direkt einbinden:

<svg xmlns="http://www.w3.org/2000/svg"> 
    <g transform="translate(20,30)"> 
    <rect width="200" height="150"/> 
    <foreignObject width="200" height="150"> 
     <body xmlns="http://www.w3.org/1999/xhtml"> 
     <div> 
      Hello, <b>World</b>! 
     </div> 
     </body>  
    </foreignObject> 
    </g> 
</svg>

Quelle

2016-08-12 19:38:32

landete ich SVG-Code Schöpfung Refactoring und hinzugefügt, um einen Standard-Weg, um die Tooltips 'Tooltip = d3 zu erzeugen. select (element) .append ('div') .attr ('Klasse', 'Tooltip') .style ("Opazität", 0); Balken = svg ... bars.on ("Mouseover", Funktion (d) { tooltip.html ("$" + d.processed_amount + "Gesamtumsatz") .style ("Opazität", 1) .style ("links", (x (d.date)) + "px") .style ("oben", (y0 (d.amonto)) + "px"); }). On ("mouseout", Funktion (d) { tooltip.transition(). style ("Opazität", 0); }); ' – zetacu

HTML SVG: Zeige Element über alle Elemente

Antwort

Verwandte Themen