JavaScript-Raphael SVG导入大小

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

一切都很好.

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

有任何想法吗？文档对我有帮助吗？真的…

解决方法:

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

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

所以我想你可以：

>获取导入的SVG集的边界框
>使用set.translate将边界框的中心与纸张的中心对齐(例如,对于x平移,请使用((paperwidth / 2)-(bbox.x bbox.width / 2)之类的东西).
>根据边界框尺寸和纸张尺寸进行缩放.您可能希望在保持宽高比的同时进行缩放,因此必须使用最接近1(
paper.width / bbox.width和paper.height / bbox.height).
>(注意：现在将纸张中心用作缩放中心-由于您翻译了集,所以它实际上也是svg集的中心)

我是从头开始做的,所以可能不是100％准确,但是如果您有了主意,就可以摆脱毛刺.

标签：svg,scale,raphael,size,javascript
来源： https://codeday.me/bug/20191208/2088309.html