如何使用 Snap.SVG 和 Javascript 使一组 SVG 形状居中答案

【问题标题】：How to center a group of SVG shapes with Snap.SVG & Javascript如何使用 Snap.SVG 和 Javascript 使一组 SVG 形状居中
【发布时间】：2014-05-09 06:58:01
【问题描述】：

我正在尝试制作一个矩形圆，使其在 SVG 中居中（垂直和水平）

到目前为止，这是我的代码：

http://jsfiddle.net/JamThom/7G2pC/

    var a = Snap(250,250);

for (var i=0;i<90;i++) {
var sqz = a.rect(0, 0, 14, 3)
.attr({
    fill: '#666',
    transform: "r"+i*4+",75,0"
})
.data("i",i);
}

为了做到这一点，我认为我需要首先选择所有矩形并将其分组，但是当我在 for 循环中创建它们时，它们没有单独的名称，我不知道如何定位它们

任何帮助表示赞赏并为我的代码的 ameteur-ness 道歉 - 这是我第一次使用 snap.svg

【问题讨论】：

标签： javascript svg raphael snap.svg

【解决方案1】：

您可以使用translate 将其移至中心：

 transform: "t50,125 r"+i*4+",75,0"

JSFiddle

您的 SVG 为 250x250，半径为 75，因此t 的坐标为250 / 2 - 75 = 50 和250 / 2 = 125。在小提琴中我使用了变量。

【讨论】：

【解决方案2】：

就像对于 Holderdarocha 的一个细微变化一样，您可以将它们添加到一个组并翻译，就像这个小提琴 here

var skillometer = Snap(size, size);
var g = skillometer.g();
g.attr({ transform: 't' + x + ',' + y });

for (var i = 0; i < 90; i++) {
    var sqz = skillometer.rect(0, 0, 14, 3)
        .attr({
        fill: '#666',
        transform: "r" + i * 4 + "," + radius + ",0"
    }).data("i", i);
    g.append( sqz );    

}

// you can now animate or move the whole group as one.
g.animate({ transform: 't'+x+','+y+'s1.65' }, 5000 );

没有太大区别，除非您想移动整个批次或为其设置动画，在这种情况下，此组方法可能更可取，因为您将来可以通过仅对组元素进行变换来移动组（具有包括它只是为了突出显示）。

【讨论】：