Snap SVG scale和中心加载的SVG文件

时间:2016-04-28 08:32:32

标签: javascript css svg html5-canvas snap.svg

我在扩展和居中从文件加载的SVG方面遇到了麻烦。 这是我用Snapsvg加载SVG文件的#svg容器:

#svg container

它已加载SVG:

loaded SVG

当我缩放它时:

scaled loaded SVG

浏览器如何检查它:

browser inspecting

我的JS:

var s = Snap("#svg");
var g = s.group();
var tux = Snap.load("svg/roulette.svg", function ( loadedFragment ) {
    g.append( loadedFragment );
    var firstScene = new Snap.Matrix();
    firstScene.scale(1.5);
    g.animate({ transform: firstScene }, 0);
});

如何缩放轮盘并将其放在svg#svg元素中?

工作示例: http://plnkr.co/edit/DE1dds8n3ULOLQRATnLY?p=preview

1 个答案:

答案 0 :(得分:1)

这可能取决于您是否需要扩展它并计算应该去哪里,或者响应型解决方案是否可行。我会首先探讨这个问题,否则就去找一个计算选项。

由于你没有展示一个正在运行的例子,但很难确定。我会发布一个jsbin文件加载,以便其他人可以播放,如果以下不起作用。

与此同时,你可以在加载函数中尝试这样的东西......它可能不起作用,虽然取决于Layer_1和其他svg父级,并设置viewBox以匹配内部SVG。

s.select('#wheel'); // or whatever ID it has, or give it one
 .attr({  width: '100%', height: '100%', viewBox: "0 0 600 600" });

顺便说一句,您不必担心矩阵,只需使用Snap变换字符串,因此您不需要该代码......例如

g.animate({ transform: 's1.5,1.5' }, 1000) 

是您需要将缩放比例设置为1.5