在 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）
您可以使用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
昨天我实际上挑选了一个相当大的 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 转换器之前对其进行缩放。
通常地图可以绘制得非常详细，但简化它们会大大减少路径长度。
I actual picked out quite a large SVG of the world yesterday and fed it through the SVGTOHTML converter.
You will find the tool and associated info @
http://www.irunmywebsite.com/raphael/svgsource.php
I set up a whole load of resources for Raphael @
http://www.irunmywebsite.com/raphael/raphaelsource.php
Amongst these you will find the world map wrapped in the scale pluton provided by Zeven!
The 20minute exercise delivered this...
http://www.irunmywebsite.com/raphael/colourmap2.php
Hopefully this will help you or someone with a similar problem in the future.
Also note that you can simplify paths in SVG editors as well as scale them before you put them in the SVGTOHTML converter.
Quite often maps can be drawn to extreme detail but simplifying them will greatly reduce path length.
您有两个选择，要么使用我所做的，使用 .transform("transform string") 来缩放路径，变换字符串可以是 sww,hh,xx,yy，其中 ww 和 hh 是您想要将路径缩放多少。
您可以在此处找到示例 或 jsfiddle 此处。
或者使用
其中 n 是您想要缩放整个纸张的量。首先在页面中创建路径，然后将纸张对象缩放一半
您可以在下面的链接中找到 Scale.Raphaeljs 库的库和示例：
缩放拉斐尔图书馆
You have two options either use what I did, use the .transform("transform string") to scale the paths, the transform string can be sww,hh,xx,yy where ww and hh is by how much you want to scale the path.
You can find an EXAMPLE HERE or jsfiddle HERE.
Or use
where n is the amount by you want to scale the whole paper by. First create the path in the page and then scale the paper object by maybe half
You can find the library and examples for the Scale.Raphaeljs library in the link below:
Scale Raphael library
如此少量的翻译似乎有点浪费，无论如何，它都是 ~0，我怀疑如果您剥离看起来像这样的变换属性，您会看到很大的差异。
是的，更改 viewBox 可以使其适合所有支持 SVG 的查看器中您想要的任何内容，但 raphael 本身不支持 viewBox（您必须自己提供一些 VML 后备）。
要么预处理路径数据以适合您的特定用途（无论如何可能是一个好主意，它总是有助于减小文件大小，维基百科地图通常很大），要么使用 raphael 的缩放函数 将路径缩放到适当的大小。
更新：Raphaël v2.0 及更高版本确实支持 viewBox（通过 setViewBox 方法）。
Translating by such a small amount seems a bit wasteful, it's ~0 anyway, I doubt you'd see much of a difference if you stripped off the transform attributes that look like that.
Yes, changing the viewBox could make it fit to whatever you wanted in all viewers that support SVG, but raphael itself doesn't support viewBox (you'd have to provide some VML fallback yourself).
Either preprocess the path data to fit your particular use (probably a good idea anyway, it always helps to keep the filesize down, wikipedia maps are usually quite large) or use raphael's scale function to scale the paths to a proper size.
Update: Raphaël v2.0 and later does support viewBox (via the setViewBox method).
您可以使用 Raphael 属性“翻译”，它采用 x,y 增量。即：
为了使其对于多个路径更可重用，您可以解析 svg 路径中 M 的 x 和 y 值。当我这样做时，结果发现我不希望我的路径完全位于 0,0 上，因为这也将其发送到画布上 - 可能需要根据元素的高度和宽度进行一些调整。
You can use the Raphael attribute 'translation', which takes an x,y delta. ie:
To make it more reusable for multiple paths, you could parse the x and y values from the M in your svg path. When I did this, it turned out that I didn't want my path to be exactly on the 0,0 since that sent it over the canvas as well -- might take some adjustment depending on the height and width of your element.