拉斐尔 svg 导入尺寸

Question

我已经从 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

一切都运行良好。

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

有什么想法吗？一路上为我提供帮助的文档？任何事情，真的...

Answer 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');

所以我想说您可以：

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

我是从头顶做的，所以它可能不是 100% 准确，但如果你知道你可能能够消除这些故障。

Answer 2

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

Answer 3

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

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

• 尝试使用变换将图像居中并“适合”其容器是行不通的，也不容易理解拉斐尔对变换的实现。
• 我意识到 raphael-svg-import 库不完整，无法使用 svg 组，并且文档不存在。

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

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

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