4

我正在尝试使用拉斐尔绘制这个欧洲的 svg 。对于 svg 中的每条路径，我已经对其进行了解析并执行了：r.path([countrypath])。这行得通，但问题是它是巨大的。例如，某些路径看起来M 11689.234, 6005.2561...甚至无法适应 500x500 的画布。我该如何调整这个大小？拉斐尔的比例/翻译似乎不起作用，或者我不知道如何使用它。我注意到在 SVG 中每个路径都有transform="translate(5.875e-4,7.538462e-5)"我需要以某种方式更改视图框吗？或者在触及拉斐尔之前以某种方式更改 svg 路径？

4

5 回答 5

4

you can use scale(Xtimes,Ytimes,centreX,centreY)

where Xtimes,Ytimes are the proportion reduction if you select 0.2 the images would be reduced to 1/5th

and

centreX, centreY are relative coordinates where you should select 0,0 so that all paths/parts of svg are scaled down uniformly and relatively

if you select scale(0.2,0.2,0,0) your image would be properly reduced to 1/5th

于 2011-03-10T07:17:57.377 回答
3

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

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

您可以在此处找到示例或jsfiddle。 或使用

paper.scaleAll(n);

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

paper.scaleAll(0.5);

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

于 2012-11-20T17:56:40.617 回答
3

实际上，我昨天从世界上挑选了一个相当大的 SVG，并通过 SVGTOHTML 转换器将其输入。您将找到该工具和相关信息 @ http://www.irunmywebsite.com/raphael/svgsource.php

我为 Raphael @ http://www.irunmywebsite.com/raphael/raphaelsource.php设置了一大堆资源， 其中你会发现 Zeven 提供的比例 pluton 包裹的世界地图！

20 分钟的练习提供了这个... http://www.irunmywebsite.com/raphael/colourmap2.php

希望这对您或将来遇到类似问题的人有所帮助。另请注意，您可以在 SVG 编辑器中简化路径并在将它们放入 SVGTOHTML 转换器之前对其进行缩放。很多时候地图可以绘制到极端细节，但简化它们会大大减少路径长度。

于 2011-02-01T04:14:17.583 回答
2

翻译这么少似乎有点浪费，反正它是~0，我怀疑如果你去掉看起来像那样的变换属性，你会看到很大的不同。

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

预处理路径数据以适合您的特定用途（无论如何这可能是一个好主意，它总是有助于降低文件大小，维基百科地图通常非常大）或使用 raphael 的 scale 函数将路径缩放到适当的大小。

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

于 2011-01-31T19:07:05.403 回答
1

您可以使用Raphael 属性“翻译”，它采用 x,y 增量。IE：

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

为了使其对多个路径更可重用，您可以从 svg 路径中​​的 M 解析 x 和 y 值。当我这样做时，结果证明我不希望我的路径正好在 0,0 上，因为这也将它发送到了画布上——可能需要根据元素的高度和宽度进行一些调整。

于 2011-05-01T01:13:26.070 回答