使用SnapSVG的角度文本

问题描述 投票:0回答:1

使用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)'
});
javascript svg snap.svg
1个回答
0
投票

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

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

Vert-Line-1

尝试

VertLine1 

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

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

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

尝试

transform: 'r30,20,40'

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

否则,您是否在控制台中看到任何错误?是否'中风'被定义,

© www.soinside.com 2019 - 2024. All rights reserved.