拉斐爾 - 如何繪製一條延伸至寬度的路徑？

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');