Question

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

根据我放置代码的顺序，我假设我的矩形/文本组将位于我的行顶部但不幸的是情况并非如此，并且无法弄清楚我做错了什么。

我的代码示例如下：

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元素显示订单问题

1 个答案: