我在扩展和居中从文件加载的SVG方面遇到了麻烦。 这是我用Snapsvg加载SVG文件的#svg容器:
它已加载SVG:
当我缩放它时:
浏览器如何检查它:
我的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元素中?
答案 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