在Raphael中调整SVG大小的问题

Question

我正在尝试使用raphael绘制这个欧洲的svg图。对于svg中的每个路径，我已经解析它并执行了 r.path([countrypath])。虽然这样做是有效的，但问题是svg太大了。例如，有些路径看起来像M 11689.234, 6005.2561...，它甚至无法适合500x500的画布。如何调整大小呢？Raphael的scale/translate似乎不起作用，或者我不知道该如何使用它。我注意到在SVG中，每个路径都有transform="translate(5.875e-4,7.538462e-5)"。我需要改变viewBox吗？还是在Raphael操作svg路径之前需要对其进行修改？

- iboeno

Answer 1

您可以使用scale(X倍数，Y倍数，中心点X坐标，中心点Y坐标)函数。

其中，X倍数和Y倍数是缩小比例。如果您选择0.2，则图像将缩小为1/5。

而中心点X坐标和中心点Y坐标是相对坐标。请选择0,0以使svg的所有路径/部分都统一且相对地缩小。

如果您选择scale(0.2,0.2,0,0)，则您的图像将被正确缩小到1/5。

- chandrahas

Answer 2

你有两个选择，要么使用我所使用的方法，使用.transform("变换字符串")来缩放路径，其中变换字符串可以是sww,hh,xx,yy，其中ww和hh是你想要缩放路径的大小。

.transform("s0.25,0.25,0,0");

您可以在以下链接找到示例：这里 或者 这里。 或者使用

paper.scaleAll(n);

其中n是您想要缩放整个页面的数量。首先在页面中创建路径，然后将纸张对象缩小一半。

paper.scaleAll(0.5);

您可以在下面的链接中找到Scale.Raphaeljs库和示例： Scale Raphael库

- Farzan

Answer 3

我昨天选择了一个相当大的世界地图SVG，并通过SVGTOHTML转换器将其输入。 您可以在以下链接找到该工具及相关信息： http://www.irunmywebsite.com/raphael/svgsource.php 我为Raphael设置了一整套资源，包括以下内容： http://www.irunmywebsite.com/raphael/raphaelsource.php 其中，您会发现地图被包裹在Zeven提供的比例普通岩石中。

20分钟的练习产生了这个结果： http://www.irunmywebsite.com/raphael/colourmap2.php 希望这能帮助您或未来遇到类似问题的人。 此外，请注意，在将它们放入SVGTOHTML转换器之前，您可以在SVG编辑器中简化路径并缩放它们。 通常，地图可以被绘制得非常详细，但简化它们将大大减少路径长度。

- Chasbeen

---

还有http://d-maps.com。如果能够将维基百科地图和d-maps.com的世界地图进行并排比较，那将会很有趣。 - Erik Dahlström

Answer 4

将其翻译成如此微小的量似乎有点浪费，反正是0，如果您去掉类似于这样的变换属性，我怀疑您不会看到太大的区别。

是的，更改viewBox可以使其适应所有支持SVG的查看器中的任何内容，但是raphael本身不支持viewBox（您必须自己提供一些VML回退）。

要么预处理路径数据以适应您特定的用途（这可能是个好主意，总是有助于保持文件大小，维基百科地图通常相当大），要么使用Raphael的缩放函数缩放路径至适当大小。

更新：Raphaël v2.0及更高版本通过setViewBox方法支持viewBox。

- Erik Dahlström

Answer 5

您可以使用 Raphael属性 'translation'，它需要一个x，y增量。例如：

r.path([countryPath]).attr({translation:'-11689, -6005'});

为了使它更适用于多个路径，你可以从 svg 路径中解析出 x 和 y 值。当我这样做时，我发现我不想让我的路径正好在 0,0 上，因为那样会超出画布范围 -- 这可能需要根据元素的高度和宽度进行一些调整。

- oxtail