缩放后如何在 Raphael 中应用（或保持）线条样式？答案

【问题标题】：How to apply (or maintain) line style in Raphael after scaling?缩放后如何在 Raphael 中应用（或保持）线条样式？
【发布时间】：2012-07-22 15:02:22
【问题描述】：

在Raphael（用于处理 SVG 的 JavaScript 库）中，you can apply transformations to an element，例如旋转、平移和缩放。

假设我想画一条 8 像素宽的线。我可以这样做：

paper = new Raphael(0, 0, 200, 200);
paper.path("M 0,0 l 200,200").attr({"stroke-width": "8px"});

但如果我想以某种方式缩放那条线，我会失去 8 像素的宽度，它会回落到标准的 1 像素宽度。

paper.path("M 0,0 l 200,200").attr({"stroke-width": "8px"}).transform("s -1,1");

无论我做什么，我似乎都无法制作任何保持笔触宽度的缩放线。其他转换工作正常。似乎只是缩放有这个问题。我在 Firefox 和 Chrome 中都遇到了同样的问题。

Here is an example of my problem on jsFiddle. 如您所见，旋转和平移工作正常，但缩放却不行。

有什么想法吗？

【问题讨论】：

【解决方案1】：

不知何故，应用变换将笔画宽度更改为 NaN。也许这是一个错误。不过，您可以使用 matrix transform 应用转换。

【讨论】：

谢谢，确实有效。我查看了 Raphael 代码，无法找出导致此错误的原因，但我确实发现如果您将笔画宽度输入为像 8 这样的整数而不是像“8px”这样的字符串，错误就会消失.如果其他人有这个问题，这可能是一个更容易解决的问题。