一、transform()获取或设置矩阵变换
var draw = SVG('svg1').size(300, 300); //Transforming SVG元素矩阵变换 var rect = draw.rect(100, 100).move(100, 100); //transform() 获取或设置变换 //默认的变换是absolute,在原始基础上变换 rect.transform({ rotation: 125 //设置旋转 }).transform({ rotation: 37.5 }); //指定为relative,在当前状态的基础上接着变换,设置的属性值会累加 rect.transform({ scale: 1.5 }).transform({ scale: 1.5, relative: true }); //或者 rect.transform({ x: 50, y: 50 }).transform({ x: 50, y: 50 }, true); //获取transform属性 var tran = rect.transform(); console.info(tran);
二、独立方法,单个操作
var draw = SVG('svg1').size(300, 300); //Transforming SVG元素矩阵变换 var rect = draw.rect(100, 100).move(50, 50); //rotate() 旋转,指定角度degrees rect.rotate(45); //指定旋转中心 rect.rotate(-45, 50, 50) //skew(x,y) 扭曲 rect.skew(0, 45); //scale(x,y) 缩放 rect.scale(0.5, -1); //translate() 移动 rect.translate(50, 50); //flip() 旋转---目前不知道用途 //rect.flip('x'); // console.info(rect.flip()); //rect.flip(5);
更多: