Question

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

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

    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的回答略有不同，你可以提到将它们添加到一个组并翻译，就像这个小提琴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 );

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

如何使用Snap.SVG＆amp; amp;使用Javascript

2 个答案: