在Raphael调整SVG大小的问题

我想用raphael绘制this svg of europe。对于svg中的每个路径，我已经解析过它并执行：r.path([countrypath])。这是有效的，但问题在于它是巨大的。例如，某些路径看起来像M 11689.234, 6005.2561...它甚至不会接近500x500的画布。我该如何调整大小？拉斐尔的量表/翻译似乎不起作用，或者我不知道如何使用它。我注意到在SVG中，每条路径都有transform="translate(5.875e-4,7.538462e-5)"我需要以某种方式更改viewBox吗？或者在触及Raphael之前改变svg路径？在Raphael调整SVG大小的问题

来源

2011-01-31 iboeno

这么少量的翻译似乎有点浪费，无论如何，它是0，我怀疑如果你剥离了看起来像这样的变换属性，你会看到很大的不同。

是的，改变viewBox可以使它适合所有支持SVG的观众，但是raphael本身不支持viewBox（你必须自己提供一些VML后备）。

要么预处理的路径数据，以满足您的特定用途（可能是一个不错的主意，无论如何，它总是有助于保持文件大小下来，维基百科的地图通常是相当大的），或者使用拉斐尔的规模功能scale the paths to a proper size。

更新：Raphaëlv2.0及更高版本确实支持viewBox（通过setViewBox method）。

来源

2011-01-31 19:07:05

我实际上昨天挑出了一个相当大的SVG世界，并通过SVGTOHTML转换器提供给它。你会发现工具和相关信息@ http://www.irunmywebsite.com/raphael/svgsource.php

我设立了拉斐尔资源的整体负载@ http://www.irunmywebsite.com/raphael/raphaelsource.php 在这些当中，你会发现世界地图裹在被采文提供的规模岩体！

的20分钟演习发表了这篇...... http://www.irunmywebsite.com/raphael/colourmap2.php

希望这将有助于你或在将来类似的问题。另请注意，您可以在SVG编辑器中简化路径，并在将它们放入SVGTOHTML转换器之前将其缩放。经常地图可以绘制到极端细节，但简化它们将大大减少路径长度。

来源

2011-02-01 04:14:17 Chasbeen

还有HTTP： //d-maps.com。看到这个基于维基百科地图和来自d-maps.com的世界地图的并行比较会很有趣。 – 2011-02-01 08:01:22

可以使用刻度（Xtimes，Ytimes，CENTREX，centreY）

其中Xtimes，Ytimes是比例减少如果选择0.2图像将被减少到1/5

和

centreX，centreY是相对坐标，您应该选择0,0，以便所有路径/ svg的部分均匀缩小并相对缩小

如果您选择缩放比例（0.2,0.2,0,0），您的图像将会正确减少到1/5

来源

2011-03-10 07:17:57 chandrahas

您可以使用Raphael attribute'翻译'，其中需要一个x，y三角洲。即：

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

为了使它更多的可重复使用多条路径，你可以解析你的svg路径中M的x和y值。当我这样做时，事实证明我不希望我的路径完全在0,0上，因为它也将它传送到画布上 - 可能需要根据元素的高度和宽度进行一些调整。

来源

2011-05-01 01:13:26 oxtail

你有两个选择要么使用我做什么，用.transform（“变换串”）规模的路径，变换字符串可以SWW，HH，XX，YY，其中WW和HH是如何你想要扩大路径。

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

你可以找到一个EXAMPLE HERE或或由您希望通过扩展整个纸张使用

paper.scaleAll(n);

其中n是量。首先在页面中创建路径，然后也许一半缩放文件对象

paper.scaleAll(0.5);

你可以找到下面的链接Scale.Raphaeljs库库和示例： Scale Raphael library

来源

2012-11-20 17:56:40 Farzan

在Raphael调整SVG大小的问题

回答

相关问题