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標記和自定義標簽