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

Question

我正在尝试制作一个矩形的圆，以在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循环中创建它们时，它们没有单独的名称，而且我不知道如何定位它们

对于我的代码的刻薄性，我们深表歉意-这是我第一次使用snap.svg

Answer 1

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

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

的jsfiddle

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

Answer 2

正如稍有改变helderdarocha一个答案，你可以为你提到它们添加到组和翻译，像这样的小提琴这里

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 );

除非您想移动或动画整个动画，否则没有太大的区别，在这种情况下，这种分组方法可能是更可取的，因为您将来可以通过仅对分组元素进行转换来移动分组（包括为了突出）。