是否可以将通用的[a，b，c，d，e，f]（svg）变换矩阵分解为一系列的turn / scale / translate指令？

Question

这不是重复项。我已经浏览了所有其他答案。

我有一个[a，b，c，d，e，f] svg变换矩阵。我想将其分解为任何系列的平移/缩放/旋转（带有可选的中心）操作。偏斜不是一个选择。我正在尝试适应Android Vector Drawable Group提供的7个属性（例如，rotation，pivotX，pivotY，scaleX，scaleY，translateX，translateY）。

我的第一个问题是，所有这些矩阵都可能吗？如果矩阵沿任一轴都有偏斜，可以通过一系列旋转操作来渲染吗？如果不是所有矩阵都可行，是否可以检测出何时不是矩阵？

第二个问题是基本数学方面的一些帮助。我知道了translateX = e和translateY = f。 scaleX = a和scaleY = d IF b和c为零。但是，当b和c不为零时，旋转和比例会纠缠在一起。我该如何解开它们？

Answer 1

基于答案here：

const sx = Math.sign(a) * Math.sqrt(a * a + c * c);
const sy = Math.sign(d) * Math.sqrt(b * b + d * d);
const tx = e;
const ty = f;
const angle = Math.atan2(b, d) * 180 / Math.PI;
const transform = `translate(${tx} ${ty}) scale(${sx} ${sy}) rotate(${angle})`;

[b / d != -a / c时似乎无法将矩阵拆分为单独的变换。不知道您是否可以使用多次旋转和缩放来解决此问题。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 250">
    <path fill="blue" opacity="0.5" transform="translate(100 -150) scale(2.8284271247461903 0.9998489885977782) rotate(45)" d="M 238 162.4 247 214.7 200 190 153 214.7 162 162.4 123.9 125.3 176.5 117.6 200 70 223.5 117.6 276.1 125.3z"/>
    <path fill="none" stroke="blue" transform="matrix(2 0.707 -2 0.707 100 -150)" d="M 238 162.4 247 214.7 200 190 153 214.7 162 162.4 123.9 125.3 176.5 117.6 200 70 223.5 117.6 276.1 125.3z" />
</svg>