g标签 怎么设置svg_svg g标签的运用

  • Post author:
  • Post category:其他


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

});



版权声明:本文为weixin_39753213原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。