Javascript raphael svg导入大小

我已经从Illustrator图像创建了一个SVG文件。我使用这个：导入和显示矢量图像

我以文本形式读取svg文件，并将其提交到导入功能：

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

一切都很顺利

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

---

有什么想法吗？文档可以帮助我吗？任何事情，真的…

我也有类似的问题。我所做的是在（SVG编辑器程序）中打开SVG，更改大小，直到确定为止。。。但可能还有更好的办法

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

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

2） 否则，可以将纸张作为一组导入。并缩放布景

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

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

[编辑（批准后）] 拉斐尔似乎使您能够获得集合的边界框：

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

（of

纸张宽度/bbox.width

和

纸张高度/bbox.height

）

（注意：现在使用纸的中心作为缩放中心-因为您转换了集合，所以这实际上也是svg集合的中心）

---

我是从头开始做这件事的，所以可能不是100%准确，但如果你有了这个想法，你可能就能够排除这些小故障。

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

我的具体问题是，在InternetExplorer（所有版本）中，图像的渲染一直超出范围，特别是将其自身与包含div的右下角对齐

• 尝试使用转换将图像居中并“适合”到其容器中并不奏效，也不容易理解拉斐尔的转换实现
• 我意识到raphael svg导入库不完整，无法使用svg组，文档也不存在

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

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

---

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

这可能会破坏SVG的整个用途，因为它要在不同的缩放中使用多个位置。不过，谢谢你的意见@1-尽管如此，纠正这一点不允许我改变不同容器中的外观。但是2是。我有一种感觉，这不是回避这个问题的最方便的方式，但现在它起作用了，我很高兴！很高兴能帮上忙。使“直接”解决方案不那么明显的问题是svg的大小。除了文档大小之外，任何软件块都能得到的唯一线索是单个svg元素的边界框的“极限”。我有一些想法，可以让它更具普遍性，并将它们作为问题中的编辑发布。