当skewX和skewY在SVG上使用时，如何补偿翻译

既然你的核心问题目前似乎是如何计算d距离。它来自于一个讲座，在这个讲座中，对于skewX，倾斜操作本质上被描述为(x, y)∑(x + d, y)。如果您查看SVG规范，您将发现一个矩阵，该矩阵实质上表明skewX(a)的确切公式是(x, y) ↦ (x + cos(a) y, y)。同样的skewY(a)你有(x, y) ↦ (x, y + cos(a) x)。所以我会说第一种情况是d := cos(a) * y，第二种情况是d := cos(a) * x。

问题的标题向我暗示了一个不同的问题。这个问题可以表述如下:给定transform="skewX(c) translate(a, b)"对于一些数字a, b和c，找到d和e，使得我刚刚给出的变换与translate(d, e) skewX(c)相同。或者换句话说:如果我想将转换移动到skewX的外部，我必须如何更改transform的条目。

要找到这些数字，请查看相应的矩阵乘积，如规范中定义的:

⎡1 tan(c) 0⎤ ⎡1 0 a⎤   ⎡1  tan(c)  a + tan(c) b⎤   ⎡1 0 a + tan(c) b⎤ ⎡1 tan(c) 0⎤
⎢0   1    0⎥∙⎢0 1 b⎥ = ⎢0    1         b       ⎥ = ⎢0 1     b       ⎥∙⎢0   1    0⎥
⎣0   0    1⎦ ⎣0 0 1⎦   ⎣0    0         1       ⎦   ⎣0 0     1       ⎦ ⎣0   0    1⎦

有d = a + tan(c) * b和e = b。你只需对平移向量应用倾斜变换。换句话说:

skewX(c) translate(a, b) = translate(a + tan(c) * b, b) skewX(c)

您可以对y进行类似的计算，得到:

skewY(c) translate(a, b) = translate(a, b + tan(c) * a) skewY(c)

如果你同时拥有skewX和skewY，你可以一次移动translate一步，这样在每一步你只需要处理一个倾斜方向。如果你想要相反的方向(即移动translate更接近斜度的内部)，在这些公式中使用- tan(c)代替+ tan(c)。

你编辑的问题和它包含的例子使它更清楚，你是真正之后是翻译CSS3 style="transform: …"转换成等效的SVG transform="…"转换。特别是以一种允许CSS3 transform-origin: 50% 50% 0px的方式，它将转换的中心放在对象的中心，而不是SVG坐标系统的原点。

下面的代码片段演示了实现此目的的两种方法。一种方法相当简单:首先将对象的中心(您已经在问题的代码片段中计算过了)转换为原点，然后执行所有转换，然后将点转换回其原始坐标。这就是中间的对象，也就是

transform="translate(256,256)
           translate(20, 20)
           rotate(45) skewX(20) skewY(-20) scale(0.6)
           translate(-256,-256)"

但是在你的问题中，你写道你想"避免使用链式translate"，上面使用(在某种意义上)。为了避免这种情况，您可以将所有翻译步骤合并为一个步骤。下面的代码做到了这一点，将翻译步骤移动到外部，即序列的开始。最终结果基本上是

transform="translate(211.325,73.165)
           rotate(45) skewX(20) skewY(-20) scale(0.6)"

除了实际结果中每个数字的位数更多。我个人认为第一种方法更简单、更清晰，但第二种方法可能更接近您的想法。

一个特别的好处是，代码按照转换描述中给出的顺序迭代基本转换，因此用户可以自由地按照他们喜欢的顺序给出转换，并且仍然可以适当地收集翻译。

var el1 = document.querySelectorAll('path')[0],
    el2 = document.querySelectorAll('path')[1],
    el2BB = el2.getBBox(), el2cx = el2BB.x + el2BB.width/2, el2cy = el2BB.y + el2BB.height/2,
    el3 = document.querySelectorAll('path')[2],
    transform = 'translate(20px, 20px) rotate(45deg) skewX(20deg) skewY(-20deg) scale(0.6)';
el1.style.transform = transform;
el1.style.transformOrigin = '50% 50% 0px';
transform = 'translate('+el2cx+','+el2cy+') ' + transform.replace(/deg/g,'').replace(/px/g,'')+' translate('+(-el2cx)+','+(-el2cy)+')';
el2.setAttribute('transform', transform);
el3.setAttribute('transform', combineTranslates(transform));
function combineTranslates(transform) {
    var ts = [], // will contain list of elementary transformations
        r = /'s*([A-Za-z0-9]+'s*'(['-0-9.,'s]*'))/g,
        match,
        pos = 0, // used during tokenization
        deg = Math.PI/180.0,
        x = 0, y = 0, // translation gets accumulated here
        tmp;
    // Tokenize transform into individual elementary transformations
    while (match = r.exec(transform)) {
        if (match.index !== pos) throw Error('Invalid transform: ' + transform);
        pos += match[0].length;
        ts.push(match[1]);
    }
    // TODO: check that only whitespace remains after matches
    //console.log(ts);
    // Iterate over transformations from inside to outside
    for (var i = ts.length - 1; i >= 0; --i) {
        match = /([A-Za-z0-9]+)'s*'((['-0-9.,'s]*)')/.exec(ts[i]);
        var op = match[1],
            args = match[2].replace(/'s+/g, '').split(',').map(Number);
        //console.log(op, args);
        switch (op) {
            // Apply given transformation to (x,y) vector
            case 'translate':
                x += args[0];
                y += args[1];
                ts.splice(i, 1); // Drop translate from ts array
                break;
            case 'rotate':
                var angle = args[0]*deg,
                    cos = Math.cos(angle),
                    sin = Math.sin(angle);
                tmp = cos*x - sin*y;
                y = sin*x + cos*y;
                x = tmp;
                break;
            case 'scale':
                x *= args[0];
                y *= (args.length === 1 ? args[0] : args[1]);
                break;
            case 'skewX':
                x += y*Math.tan(args[0]*deg);
                break;
            case 'skewY':
                y += x*Math.tan(args[0]*deg);
                break;
            default:
                throw Error('Unknown transform ' + op)
        }
    }
    ts.unshift('translate('+x+','+y+')'); // add as first element
    //console.log('From '+transform+''n  to '+ts.join(' '));
    return ts.join(' ');
};

svg { overflow: visible; width:30%; border: 1px solid #eee; }

<svg id="svgMixedCSS" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 500">
    <path fill="green" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z" ></path>
</svg>
<svg id="svgMixedAttr" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 500">  
  <path fill="indigo" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>            
</svg>
<svg id="svgCombinedAttr" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 500">  
  <path fill="blue" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>            
</svg>