在svg中提供了如g元素这样的将多个元素组织在一起的元素。
由g元素编组在一起的可以设置相同的颜色，可以进行坐标变换
下面是运用了snap.svg.js的实例
// 创建一个svg 对象
var snap=Snap(“#circle”);
snap.attr({
width:1000,
height:600
});
// 路径
var d=”M45.72,23.661C45.663,10.593,35.487,0,22.86,0C10.234,0,0,10.593,0,23.661″+
“c0,13.383,14.294,33.036,20.257,40.65c1.308,1.67,3.829,1.675,5.141,0.009C31.394,56.709,45.78,37.05,45.72,23.661″；
// 画水滴
var water=snap.paper.el(“path”,{
d:d,// 路径
//fill:”#3282C5″ // 填充色
});
// 写入文本
var t1 = snap.paper.text(50, 50, “Snap”);
var t2 = snap.paper.text(150, 50, [“S”,”n”,”a”,”p”]);
// 放到g 标签中去
snap.g(water,t1,t2).attr({
id:”group”,
fill:”black”, // 定义黑色 ，这时候水滴和文本都是黑色
opacity:”0.5″, // 定义透明度 ，这时候水滴和文本都是 00.5的透明度
width:”1000px”,
height:”600px”，
transform:”translate(50,50) scale(0.5) rotate(45,100,100) ” ,// 运用变形
});