SVG.js 元素操作整理（二）-Transform

一、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);

更多：

SVG.js 元素操作整理（一）

SVG.js 引用获取整理

SVG.js Marker标记和自定义标签