CONTEXT: @AnaTudor (@daredevil)正在谈论使用skewX或skewY时svg的d移动距离，所以我想知道是否有任何方法可以计算该距离以补偿翻译，并避免使用链式translate。
测试用例:在下面的代码片段中，我们不会使用SVG特定的链接和/或嵌套，我们只使用相同的转换值，但以特定的转换函数顺序;
-
左绿色矩形 via
style:translate,rotate,skewX,skewY,scale; -
右橄榄矩形 via
transformattribute:translate,scale,rotate,skewX， ' skewY.
现在，正如你所看到的，这两个矩形有不同的位置，如果你点击按钮，第二个矩形会更接近我们期望的位置，但仍然需要计算更多的情况
问题:我们如何改变fixOrigin函数来调整所有可能的转换函数组合的翻译，以一种看起来与CSS3转换相同的方式?
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,
btn = document.querySelectorAll('button')[0], btn1 = document.querySelectorAll('button')[1],
x = 20, y = 20, scale = 0.6, rotate = 45, skewX = 20, skewY = -20;
el1.style.transform = 'translate(20px, 20px) rotate(45deg) skewX(20deg) skewY(-20deg) scale(0.6)';
el1.style.transformOrigin = '50% 50% 0px';
el2.setAttribute('transform', 'translate('+x+','+y+') scale('+scale+') rotate('+rotate+' '+el2cx+','+el2cy+') skewX('+skewX+') skewY('+skewY+')');
function fixOrigin(){
x += (1-scale) * el2BB.width/2;
y += (1-scale) * el2BB.height/2;
el2.setAttribute('transform', 'translate('+x+','+y+') scale('+scale+') rotate('+rotate+' '+el2cx+','+el2cy+') skewX('+skewX+') skewY('+skewY+')');
}
btn.addEventListener('click',fixOrigin,false);
function fixEverything() {
// scale binds all transform functions together
if ( !!scale ) {
//most important make sure we have translation values
//!!(x) && (x=0); !!(y) && (y=0);
// first adjust translate based on scale value
x += (1-scale) * el2BB.width/2;
y += (1-scale) * el2BB.height/2;
//now we also adjust the rotation transform origin based on SKEWS
if (!!rotate) {
// el2cx += .... el2cy += ...
}
//almost there, now we adjust the translation based on SKEWS
// x += ... y += ...
// last case, when SKEWS are used alone
} else if ( !scale && !rotate ) {
// adjust translation here
// x += ... y += ...
}
el2.setAttribute('transform', 'translate(' + x + ',' + y + ') scale(' + scale + ') rotate(' + rotate + ' ' + el2cx + ',' + el2cy + ') skewX(' + skewX + ') skewY(' + skewY + ')');
}
btn1.addEventListener('click', fixEverything, false);/* desired transform
transform-origin: 50% 50% 0px;
transform: translate(20px, 20px) rotate(45deg) skewX(20deg) skewY(-20deg) scale(0.6);
*/
svg {
overflow: visible; width:30%;
border: 1px solid #eee; /* some sort of ruler */
}<button>Fix Transform Origin</button><button>Fix All</button><br>
<p>Click to change the `transform` attribute</p>
<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>我做了一个超级酷的片段给你玩。更新:它也有一个函数草案与所有可能的情况。
既然你的核心问题目前似乎是如何计算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>