Raphael SVG导入尺寸

Question

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

我将svg文件读取为文本，并将其提交给import函数：

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

一切都运作得非常好。

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

有什么想法吗？有没有帮助我解决问题的文档？实际上，任何东西都可以...

- DummeDitte

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将边界框的中心与纸张的中心对齐（例如，对于x轴平移，可以使用类似于( paperwidth / 2 ) - ( bbox.x + bbox.width / 2 )的内容）。
3. 根据边界框大小与纸张大小进行缩放。您可能想要在保持长宽比的同时缩放，因此必须使用最接近1的比例（即paper.width/bbox.width和paper.height/bbox.height之一）。
4. （注意：现在将纸张中心用作缩放中心-因为您已经翻译了您的设置，所以实际上这也是svg设置的中心）

这是我凭记忆写的，可能不是100％准确，但如果您理解了我的意思，您可能能够消除错误。

- Jochem

---

尽管如此，纠正这个问题并不能改变不同容器中的外观。但是2可以。我有一种感觉，这不是解决问题最方便的方法，但暂时它能够工作，我很高兴！ - DummeDitte

很高兴能够提供帮助。使“直截了当”的解决方案不那么明显的问题是svg的大小是多少。除了文档大小之外，任何软件片段唯一可以获得的线索是各个svg元素边界框的“极值”。我有一些关于使这更加通用的想法，并将它们作为问题的编辑发布。 - Jochem

Answer 2

我曾经遇到过类似的问题。我的解决方法是使用Inkscape（SVG编辑器程序）打开SVG文件，调整大小直到满意...但可能还有更好的方法！

- Adrian Smith

---

那样做会破坏SVG的整个目的，因为它是用来在不同的比例尺下在多个位置使用的。不过还是感谢您的建议！ - DummeDitte

Answer 3

我遇到了与原帖作者完全相同的问题。我做了和他一样的事情。即使在阅读了Jochem的解决方案/想法后，我仍然遇到了几天无法解决的问题。

我的具体问题是，在Internet Explorer（所有版本）中，图像始终超出边界，特别是对齐到包含div的右下角。

• 尝试使用变换来将图像居中并“适应”其容器既不起作用，也不容易理解Raphael的变换实现。
• 我意识到raphael-svg-import库是不完整的，无法处理svg组，并且缺乏文档。

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

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

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

- dnshio