Is it possible to decompose a generic [a, b, c, d, e, f] (svg) transform matrix into a series of rotate/scale/translate directives?

Question

This is not a duplicate. I've looked through all of the other answers.

I have an [a, b, c, d, e, f] svg transform matrix. I want to decompose it into any series of translate/scale/rotate(with optional center) operations. Skew is NOT an option. I'm trying to fit within the 7 attributes provided by the Android Vector Drawable Group (eg, rotation, pivotX, pivotY, scaleX, scaleY, translateX, translateY).

My first question is, is that possible for all such matrices? If the matrix has skew along either axis, can that be instead rendered via a series of rotate|scale operations? If not all matrices are possible, is it possible to detect when they're not?

The second question is some help with the basic math. I get as far as translateX = e and translateY = f. scaleX = a and scaleY = d IF b and c are zero. But when b and c are non zero, rotation and scale get entangled. How can I disentangle those?

Answer 1

Based on the answer 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})`;

It looks like there is no way to split the matrix into individual transforms when b / d != -a / c. Whether you can solve this using multiple rotations and scaling, I don't know.

<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>