javascript - 拉斐尔 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

一切都很好。

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

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

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% 准确，但如果你明白了，你可能能够消除这些错误。