理解SVG中的矩阵

Question

我需要帮助深入理解SVG中的矩阵.我已经知道矩阵,我想旋转和缩放而不使用缩放或旋转字.我想使用transform ='matrix(a,b,c,d,e,f)'.我知道'a/d'值确定比例,'e/f'确定位置.tan(b),tan(c)确定偏斜.cos(a),sin(b), - sin(c),cos(d)决定角度.但我想知道这是如何工作的,我需要彻底帮助理解SVG中的矩阵.

Answer 1

矩阵运算由矩阵级联(即乘法)的单个"局部"变换(即平移,旋转,缩放,倾斜)组成.

例如,如果要r围绕某个点旋转一个对象(x, y),您可以转换为(x, y),旋转r度数,然后转换回原始位置(-x, -y).

通过所谓的"链接"(如上所述),将每个连续的"局部"变换组合以产生结果.因此,在一系列转换中的任何位置,"本地"转换空间(在该位置)由之前的所有操作组成.

这意味着当变换SVG元素的某些参数(即转换)时,变换应用于其当前的变换空间.因此,例如,如果元素已经旋转了30度,那么平移(8, 5)将不会向右移动8而向下移动5,但是相对于当前位置,它将向(8,5)旋转30度.

所以这有点儿了.

帮助处理这种并发症的一种方法是将转换矩阵分解为它们各自的总转换(即总转换,总转动/倾斜,总比例),但是分解没有说明单个基本转换进入合并总数,也没有说明它们发生的顺序.这是一个问题,因为2D变换不是可交换的,例如translate(x, y)->rotate(r)不相同rotate(r)->translate(x, y).

我发现的最好方法是只按特定顺序组合转换并按顺序跟踪总计,然后在引入新转换时,使用已跟踪的总计,更新正在修改的总计并重新组合整个转型.

像这样:(伪代码)

// EDIT: initialize components (new SVGMatrix returns the identity matrix)
var transX=0, transY=0, rot=0, scaX=0, scaY=0, skwX=0, skwY=0, matrix = new SVGmatrix();

// example rotate
function rotate(svgEl, angle){
    rot = rot + angle;
    updateTransform();
    applyTransform(svgEl);
};

function updateTransform(){
    // the order that I've found most convenient
    // (others may do it differently)
    matrix.translate(transX, transY);
    matrix.rotate(rot);
    matrix.scale(scaX, scaY);
    matrix.skewX(skwX);
    matrix.skewY(skwY);
};

function applyTransform(el){
    el.transform = matrix;
};

需要明确的是,这并不是说矩阵不是表示变换的好方法,也不是暗示一种更好的方式 - 远非它.

转换矩阵是一个强大的工具,如果使用得当,它们在处理复杂的动画方面非常有效,但在所有情况下使用它们并不容易.

这可能有点高级,但是有关使用矩阵变换的动画的更多信息,这个简短的代码示例提供了大量的信息和参考资料.

http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/#matrix-decomposition