Snapsvg Element Anzeige Bestellung Problem

Question

Ich verwende die Bibliothek "snapsvg.io" und bin mir nicht sicher, warum der folgende Code mein Rechteck nicht mit Text über meinem SVG-Linienelement anzeigt.

Basierend auf der Reihenfolge, die ich meinen Code platziert habe, nahm ich an, dass meine Rect/Textgruppe über meiner Linie wäre, aber leider ist dies nicht der Fall und kann nicht herausfinden, was ich falsch mache.

Das Codebeispiel ist, ich habe wie folgt:

line = s.line(trunkLeftPos, 100, trunkLeftPos, 440); 
line.attr({ 
    stroke: error1 ? alert : error2 ? alert : stroke,    
    strokeWidth: 1 
}); 

var text = s.text(trunkLeftPos + 4, trunkLeftTextPos, 'my text'); 

text.attr({ 
    fill: error1 ? alert : error2 ? alert : textColorOK,    
    fontSize: '11px', 
    'font-weight': '600', 
    'font-family': 'Arial Narrow, sans-serif', 
    'text-anchor': 'start', 
    cursor: error1 ? 'pointer' : error2 ? 'pointer' : 'default',    
}); 

var rect_bg = s.rect(trunkLeftPos + 2, trunkLeftTextPos - 10, 50, 13, 0, 0).attr({fill: "rgb(236, 240, 241)",stroke: "#1f2c39",strokeWidth: 1});     
var g0 = s.g(rect_bg,text); 

Was ich versucht habe, Sie hier die Reihenfolge des Spiels zu zeigen, wo ich mein g0 Element erwartet, um über meine Linienelement platziert werden, sondern von dem, was ich kann sehen, die vertikale Linie erscheint über dem oberen Rand meines g0-Elements und nicht darunter.

Irgendwelche Ideen?

Answer 1

Ich habe gerade ein Codepen Beispiel erstellt und sieht so aus, als ob alles mit dem Probentest in meinem Codepen funktioniert, basierend auf der gleichen Anzeige Reihenfolge, die ich oben dargestellt habe.

Sieht aus wie ich bei meinen Werten suchen müssen, wie durch @Sphinxxx angegeben

See: http://codepen.io/tonyf/pen/KMzvRe?editors=1010

<svg id="svg" width="400" height="400"></svg> 

const s = Snap("#svg"); 
const line = s.line(0, 0, 40, 200); 
line.attr({ 
    stroke: 'green',    
    strokeWidth: 2 
}); 

const text = s.text(0 + 14, 100, 'my text'); 
text.attr({ 
    fill: 'red',    
    fontSize: '11px', 
    'font-weight': '600', 
    'font-family': 'Arial Narrow, sans-serif', 
    'text-anchor': 'start'  
}); 

const rect_bg = s.rect(0 + 10, 90, 50, 13, 0, 0).attr({ 
    fill: "#fff", 
    stroke: "#1f2c39", 
    strokeWidth: 0.5 
});     

const g0 = s.g(rect_bg,text);