Question

我需要帮助深入理解SVG中的矩阵。我已经知道矩阵，我想旋转和缩放而不使用缩放或旋转字。我想使用transform =＆＃39;矩阵（a，b，c，d，e，f）＆＃39;。我知道＆＃39; a / d＆＃39;价值决定了规模，＆＃39; e / f＆＃39;确定位置。 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

理解SVG中的矩阵

1 个答案: