Snapsvg Element Display Order Issue

Question

Я использую библиотеку snapsvg.io и не знаю, почему следующий код не отображает мой прямоугольник с текстом поверх моего элемента svg line.

Основываясь на заказе, который я поместил в свой код, я предположил, что моя группа rect/text будет поверх моей линии, но, к сожалению, это не так и не может понять, что я делаю неправильно.

Пример кода у меня есть выглядит следующим образом:

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

То, что я попытался показать вам, здесь есть порядок игры, где я ожидал мой g0 элемент, который будет помещен над моей линии элемента, но с тем, что я можно видеть, вертикальная линия появляется поверх моего элемента g0, а не ниже.

Любые идеи?

Answer 1

Просто созданный пример кода и выглядит так, как будто все отлично работает с тестовым тестом внутри моего кодефа на основе того же порядка отображения, который я представил выше.

Похоже, мне нужно, чтобы посмотреть на мои ценности, как указано @Sphinxxx

См: 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);