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

How to center a group of SVG shapes with Snap.SVG & Javascript

本文关键字：SVG 一组 形状 Javascript Snap 何使用      更新时间：2023-09-26

我正在尝试制作一个矩形圆圈，在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

您可以使用translate:

将其移动到中心
 transform: "t50,125 r"+i*4+",75,0"

JSFiddle

你的SVG是250x250，半径是75，所以t的坐标是250 / 2 - 75 = 50和250 / 2 = 125。

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

没有太大的区别，除非你想移动或动画整个批次，在这种情况下，这个组方法可能是更可取的，因为你可以在未来移动组的变换只是对group元素(包括它只是为了突出显示)。

相关文章：