对齐SVG缩放和中心加载的SVG文件

我无法缩放和居中从文件加载的SVG。这是#svg容器我加载与Snapsvg SVG文件：对齐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

来源

2016-04-28 Demid Ganenko

，如果你需要它的规模和计算，它应该去，或者如果响应类型的解决方案可以工作，这可能取决于。我会先探索这个，然后去计算一个选项。

由于您尚未显示正在运行的示例，因此很难确定。我会发布一个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" });

顺便说一句，你不需要担心矩阵，只需使用捕捉变换字符串，所以你不需要的代码......如

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

是你需要将动画缩放为1.5

来源

2016-04-28 09:19:21 Ian

http://plnkr.co/edit/DE1dds8n3ULOLQRATnLY 'g.animate（{transform：'s1.5'}，1000）'不起作用。将viewBox更改为300x300或600x600时 - SVG右移太多。但更小的viewBox SVG出现在#svg容器中 –

对于动画，尝试's5,5'，我忘了它需要x和y。 – Ian

另外，它看起来像你重写的宽度/高度与CSS，所以我会删除（除非这是你想要的）。 – Ian

对齐SVG缩放和中心加载的SVG文件

回答

相关问题