使用SnapSVG

时间:2016-05-30 07:47:03

标签: javascript svg snap.svg

使用snapsvg.io,我说有4条垂直线,一定长度位于盒子下方,在盒子的x轴上均匀分布。

我不确定该怎么做,将每条垂直线都添加到每条线上,并在每条线上均匀堆叠但在某些高度并以45度角显示,以便制作文本可读,跨越每条垂直线,从最左边到最右边。

每个文本标签的高度,第一个标签位于最左侧垂直线的底部,具有45度角等等,横跨下一条垂直线,位于不同高度位置,45度角等

我有以下内容但不相信语法是正确的。

var text = s.text(100, 100, 'Vert-Line-1');

text.attr({
  fill: stroke,
  fontSize: '9px',
  'font-weight': '600',
  'text-anchor': 'start',
  'transform': 'rotate(30 20,40)'
});

1 个答案:

答案 0 :(得分:0)

实际上,转换应该有效。尝试几件事......

首先这看起来不对,因为它有一个短划线/减号。

Vert-Line-1

尝试

VertLine1 

作为变量名称(如果它应该是它应该是什么)在定义它时使用它。

您也可以尝试以下操作,并使用转换字符串,如果这不起作用......那么而不是

'transform': 'rotate(30 20,40)'

尝试

transform: 'r30,20,40'

然而,第一个例子应该仍然有用,它在技术上是正确的,但是包括第二个例子只是为了看第一个修复不起作用是否有任何区别。

否则,您是否在控制台中看到任何错误?是否“中风”,