Snapsvg 元素显示顺序问题

Question

我正在使用 snapsvg.io 库，但不确定为什么以下代码没有在我的 svg 行元素上显示带有文本的矩形。

根据我放置代码的顺序，我假设我的 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

刚刚创建了一个 codepen 示例，看起来在我的 codepen 中根据我上面介绍的相同显示顺序进行示例测试时一切正常。

看来我需要按照@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);

Snapsvg 元素显示顺序问题

Snapsvg Element Display Order Issue

javascript

svg

snap.svg