Snapsvg 元素显示顺序问题答案

【问题标题】：Snapsvg Element Display Order IssueSnapsvg 元素显示顺序问题
【发布时间】：2016-06-13 22:47:53
【问题描述】：

我正在使用 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 元素放置在我的 line 元素上的播放顺序，但据我所见，垂直线出现在我的 g0 元素的顶部而不是下方它。

有什么想法吗？

【问题讨论】：

所有变量的值是多少，例如trunkLeftPos 和 trunkLeftTextPos?一个 JSFiddle 会很好。

标签： javascript svg snap.svg

【解决方案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);

【讨论】：