1

我正在尝试制作一个矩形圈，在 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 的第一次体验

4

2 回答 2

1

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

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

JSFiddle

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

于 2014-03-29T20:42:04.140 回答
0

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

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

于 2014-03-31T08:46:27.217 回答