svg g标签的运用-吴惟刚

svg g标签的运用

发表于 svg 分类，标签:

29 06月 2015

在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) " ,// 运用变形

});