在 Raphael 中调整 SVG 大小时出现问题
我正在尝试使用拉斐尔绘制欧洲的这个svg。对于 svg 中的每条路径,我都对其进行了解析并执行:r.path([countrypath])
。这可行,但问题是它太大了。例如,某些路径看起来像 M 11689.234, 6005.2561...
它甚至不太适合 500x500 画布。我该如何调整这个大小?拉斐尔的缩放/翻译似乎不起作用,或者我不知道如何使用它。我注意到在 SVG 中每个路径都有 transform="translate(5.875e-4,7.538462e-5)"
我需要以某种方式更改 viewBox 吗?或者在触及拉斐尔之前以某种方式改变 svg 路径?
I am trying to draw this svg of europe using raphael. For each path in the svg, I've parsed it and do: r.path([countrypath])
. This works, but the problem is that it is gigantic. For example, some of the paths look like M 11689.234, 6005.2561...
It isn't even coming close to fitting on a 500x500 canvas. How do I resize this? Raphael's scale/translate don't seem to work, or I don't know how to use it. I noticed in the SVG each path has transform="translate(5.875e-4,7.538462e-5)"
Do I need to somehow change the viewBox? Or change the svg path's somehow before it touches Raphael?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(5)
昨天我实际上挑选了一个相当大的 SVG 世界并通过 SVGTOHTML 转换器将其输入。
您将找到该工具和相关信息@
http://www.irunmywebsite.com/raphael/svgsource.php
我设置了一个拉斐尔的全部资源@
http://www.irunmywebsite.com/raphael/raphaelsource.php
其中你会发现包裹在Zeven提供的比例冥王星中的世界地图!
20分钟的练习带来了这个……
http://www.irunmywebsite.com/raphael/colourmap2.php
希望这会有所帮助您或将来遇到类似问题的人。
另请注意,您可以简化 SVG 编辑器中的路径,也可以在将它们放入 SVGTOHTML 转换器之前对其进行缩放。
通常地图可以绘制得非常详细,但简化它们会大大减少路径长度。
您有两个选择,要么使用我所做的,使用 .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 库的库和示例:
缩放拉斐尔图书馆
如此少量的翻译似乎有点浪费,无论如何,它都是 ~0,我怀疑如果您剥离看起来像这样的变换属性,您会看到很大的差异。
是的,更改 viewBox 可以使其适合所有支持 SVG 的查看器中您想要的任何内容,但 raphael 本身不支持 viewBox(您必须自己提供一些 VML 后备)。
要么预处理路径数据以适合您的特定用途(无论如何可能是一个好主意,它总是有助于减小文件大小,维基百科地图通常很大),要么使用 raphael 的缩放函数 将路径缩放到适当的大小。
更新:Raphaël v2.0 及更高版本确实支持 viewBox(通过 setViewBox 方法)。
您可以使用 Raphael 属性“翻译”,它采用 x,y 增量。即:
r.path([countryPath]).attr({translation:'-11689, -6005'});
为了使其对于多个路径更可重用,您可以解析 svg 路径中 M 的 x 和 y 值。当我这样做时,结果发现我不希望我的路径完全位于 0,0 上,因为这也将其发送到画布上 - 可能需要根据元素的高度和宽度进行一些调整。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
您可以使用scale(Xtimes,Ytimes,centreX,centreY)
,其中Xtimes,Ytimes是比例缩小,如果您选择0.2,图像将缩小到1/5
,
centerX、centerY是相对坐标,您应该选择0,0,这样svg 的所有路径/部分都会均匀且相对地缩小,
如果您选择scale(0.2,0.2,0,0),您的图像将适当缩小到 1/5
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