捕捉 SVG 比例并居中加载 SVG 文件答案

【问题标题】：Snap SVG scale and centre loaded SVG file捕捉 SVG 比例并居中加载 SVG 文件
【发布时间】：2016-08-22 21:38:34
【问题描述】：

我在从文件加载的 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

【问题讨论】：

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

【解决方案1】：

这可能取决于您是否需要对其进行缩放并计算它应该去哪里，或者响应式解决方案是否可以工作。我会先探索这个，否则会选择一个计算选项。

由于您没有展示运行示例，因此很难确定。如果以下内容不起作用，我会发布一个加载文件的 jsbin，以便其他人可以播放。

与此同时，您可以在 load 函数中尝试类似的操作...它可能无法正常工作，但取决于 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 即可

【讨论】：

plnkr.co/edit/DE1dds8n3ULOLQRATnLY g.animate({ transform: 's1.5' }, 1000) 不起作用。将 viewBox 更改为 300x300 或 600x600 时 - SVG 向右移动太远。但是随着较小的 viewBox SVG 出现在#svg 容器中
对于动画，试试 's5,5'，我忘了它需要 x 和 y。
另外，看起来你正在用 css 覆盖宽度/高度，所以我会删除它（除非那是你想要的）。
我正在覆盖#svg 宽度和高度，但不是#Layer_1，它不适合#svg 容器。我想让它响应，但不能
g.animate({ transform: "s2.5,2.5" }, 100); 就像一个魅力。谢谢