拉斐尔 - 如何绘制一条延伸至宽度的路径？

Question

这可能是一个非常愚蠢的问题，但我该如何绘制一条可以伸展到div宽度的路径？

我正在尝试使用Raphaeljs制作一个交互式图表：用户可以点击迷你图线并上下移动以显示文本内容。我发现拉斐尔的矩形和其他形状可以通过将宽度设置为100％来拉伸到宽度，但我无法获得一条线来做到这一点。

我已经设置了纸这样的：

var SLAPaper = new Raphael(document.getElementById("LineSLA"), "100%", 60); 

设置类似的行：

var lineSLA = SLAPaper.path("F1 M 0,42L 103,12L 222,45L 390,13L 460,45L 453,27L 455,28L 450,0L 479,25"); 

我还设置视框，但是这似乎并没有有所作为。我无法在视框上设置％宽度：

SLAPaper.setViewBox(0,0,1500,60, true); 

任何帮助表示赞赏。谢谢。

Answer 1

我个人在使用百分比来定义Raphael中纸张和对象的大小时遇到​​问题，特别是使用Internet Explorer。我能想到的最好的办法是根据路径的宽度（假设宽度大于高度）来缩放纸张以适合内部纸张：

var line = SLAPaper.path("F1 M 0,42L 103,12L 222,45L 390,13L 460,45L 453,27L 455,28L 450,0L 479,25"); 
var scl = SLAPaper.width/line.getBBox().width; 
line.transform('S' + scl + ',' + scl + ',0,0');