Question

我在扩展和居中从文件加载的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元素中？

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

Answer 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

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

1 个答案: