捕捉 SVG 比例和居中加载的 SVG 文件

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

这可能取决于您是否需要扩展它并计算它应该去哪里，或者响应式解决方案是否可行。我会先探索这个，否则会选择一个经过计算的选项。

由于您没有展示运行示例，因此很难确定。我会 post 建立一个加载文件的 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

捕捉 SVG 比例和居中加载的 SVG 文件

Snap SVG scale and centre loaded SVG file

javascript

css

svg

html5-canvas

snap.svg