raphael svg 导入尺寸答案

【问题标题】：raphael svg import sizeraphael svg 导入尺寸
【发布时间】：2011-11-02 00:11:18
【问题描述】：

我从 Illustrator 图像创建了 SVG 文件。我正在使用这个：https://github.com/wout/raphael-svg-import 来导入和显示矢量图像。

我以文本形式读取 svg 文件，并将其提交给导入函数：

var mygetrequest = new XMLHttpRequest();
var svgdata = mygetrequest.responseText; 
paper.importSVG(svgdata); //where paper is my Raphael canvas

一切都很好。

但我似乎找不到任何有关如何更改图像设置和视图的信息或提示？例如，我非常希望它填满它的容器，不管它的大小。

有什么想法吗？帮助我一路走来的文档？什么都行，真的……

【问题讨论】：

标签： javascript svg size raphael scale

【解决方案1】：

我可以为您提供两个想法：

1) 也许 SVG 导入会考虑原始大小并为您进行缩放。但是，在 illustrator 中编辑时，您可能周围有一个更大的文档，这会混淆 svgImport？

2) 否则，您可以将论文作为一组导入。并缩放集合。

var set = paper.set();
paper.importSVG(svgdata, set);
set.scale( 2, 2, centerx, centery );

（如果没有示例可玩，我不确定 centerx 和 centery 应该是什么）。

[编辑（批准后）] Raphael 似乎可以让您获得集合的边界框：

var bbox = set.getBBox();
// You'll now have bbox.x, bbox.y, bbox.width and bbox.height at your disposal. 
// For example:
paper.rect( bbox.x, bbox.y, bbox.width, bbox.height ).attr('border', 'red');

所以我会说你可以：

获取导入的 SVG 集的边界框
使用set.translate 将边界框的中心与纸的中心对齐（例如，使用( paperwidth / 2 ) - ( bbox.x + bbox.width / 2 ) 之类的东西来进行x 平移）。
根据与纸张大小相比的边界框大小进行缩放。您可能希望在保持纵横比的同时进行缩放，因此您必须使用最接近 1（的 paper.width/bbox.width 和 paper.height/bbox.height)。
（注意：现在使用纸的中心作为缩放中心 - 因为你翻译了你的集合，这实际上也是 svg 集合的中心）

我从头到尾做了这个，所以它可能不是 100% 准确，但如果你明白了，你可能能够摆脱这些故障。

【讨论】：

@1 - 尽管如此，更正此问题并不允许我更改不同容器中的外观。但是 2 可以。我觉得这不是解决问题的最方便的方法，但现在它有效，我很高兴！
很高兴为您提供帮助。使“直截了当”的解决方案不那么明显的问题是 svg 的大小是多少。除了文档大小之外，任何软件都可以拥有的唯一线索是各个 svg 元素的边界框的“极端”。我有一些关于使它更通用的想法，并将它们作为编辑发布在问题中。

【解决方案2】：

我遇到了类似的问题。我所做的是在Inkscape（SVG 编辑器程序）中打开 SVG，更改大小直到可以...但可能有更好的方法！

【讨论】：

这会破坏 SVG 的全部用途，因为它是为了在不同的缩放比例中使用多个地方。不过，感谢您的意见！

【解决方案3】：

我遇到了与原始海报完全相同的问题。我正在做和他一样的事情。即使在阅读了 Jochem 的解决方案/想法后，我也遇到了几天都无法解决的问题。

我的具体问题是，在 Internet Explorer（所有版本）中，图像不断渲染超出范围，特别是与包含 div 的右下角对齐。

尝试使用转换将图像居中并将其“拟合”到其容器中不起作用，也不容易理解 Raphael 的转换实现。
我意识到 raphael-svg-import 库不完整，无法使用 svg 组并且文档不存在。

在这个问题上花了这么多时间后，我的高级开发人员得出结论，这个插件有缺陷并且无法使用。

到目前为止，我还没有找到满足我特定要求的替代解决方案（由于公司政策，我们不能使用 Flash）。对于那些没有这种限制的人，我推荐谷歌的SVGWeb

虽然这不是对 OP 问题的答案，但我的发现可能会为将来可能遇到此问题的人节省一些时间。

【讨论】：