raphael svg import size

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

我读了SVG文件的文本，并将其提交给了进口函数：

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

所有工作非常漂亮。

但我似乎无法找到任何信息或提示如何更改图像的设置和视图？例如，我非常喜欢它来填充它的容器，无视这个大小。

任何想法？文档可以帮助我一路走来？任何东西，真的...

来源

2011-08-23 DummeDitte

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

1）也许的SVG导入考虑到原来的大小和为你做缩放。但是，在Illustrator中编辑时，可能有更大的文档，这会混淆svgImport？

2）否则，您可以将纸张作为一个集合导入。并缩放集合。（我不确定没有一个例子可以玩，什么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将边界框的中心与纸张中心对齐（例如，对于x平移使用类似(paperwidth/2) - (bbox.x + bbox.width/2)的东西）。
根据与纸张尺寸相比的边界框尺寸进行缩放。您可能希望在保持宽高比的同时进行缩放，因此您必须使用最接近1（ paper.width/bbox.width和paper.height/bbox.height）的那个。
（注：现在的纸张使用中心作为缩放的中心 - 因为你翻译你的设置其实这是SVG的中心设定为好）

我这样做，从我的头顶，因此可能不是100％准确的，但如果你有这个想法，你可能会摆脱毛病。

来源

2011-08-23 14:22:05 Jochem

@ 1 - 无论如何，纠正这一点不会让我改变不同容器的外观。但是2。我有一种感觉，这不是解决问题最方便的方法，但现在它起作用了，我很高兴！ – DummeDitte

非常有帮助。 “直接”解决方案的问题并不那么明显，问题是svg的大小是多少。除了文档大小之外，任何软件的唯一线索就是各个svg元素边界框的“极端”。我有一些想法让它更具普遍性，并将它们作为EDIT发布在问题中。 – Jochem

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

来源

2011-08-23 14:16:08

这样会毁了SVG的整个目的，因为它意味着要在不同的缩放中使用几个地方。感谢您的意见，但！ – DummeDitte

我和原来的海报有完全一样的问题。我和他做的事情是一样的。即使在我阅读了Jochem的解决方案/想法之后，我遇到了几天仍无法解决的问题。

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

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

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

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

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

来源

2012-03-16 16:19:52 dnshio

raphael svg import size

回答

相关问题