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

【问题标题】：Raphael - how to draw a path that stretches to width?拉斐尔 - 如何绘制一条延伸到宽度的路径？
【发布时间】：2011-11-30 00:05:47
【问题描述】：

这可能是一个非常愚蠢的问题，但是我如何绘制一条延伸到 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);

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

【问题讨论】：

标签： svg line raphael vector-graphics

【解决方案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');

【讨论】：

谢谢。我试过这个，但线路没有任何反应。我会继续玩它的。
我能够通过更改线路的视图框来解决原始问题。将水平设置为 460 可以拉伸并适合窗口。不知道为什么。