提供x，y，宽度和高度值，如何获得从中心缩放的svg变换矩阵

Question

I have a code that generates gif file from svg using php and imagemagick. Below is the sample svg code. Assuming the animation is going to be created by tweening the scale transform scale value from 0 to 1, how do I get the transform matrix that'll center the transform origin using svg element properties x,y,width, height?

Note: I do all the computation with php and the conversion to raster using Imagemagick which I dont think supports the css transform-origin style.

Currently, the transition starts from the left. I want to translate it using matrix.

The link below is the example gif of the current implementation https://i.imgur.com/juMX3uD.gifv

Transformed SVG

<svg xmlns="http://www.w3.org/2000/svg" class="layer" overflow="visible" 
stroke="none" stroke-width="0" preserveAspectRatio="none" 
id="layer_1547759965149_0506449632092969" width="135.24545454545" 
height="110.9375" x="86.896363636365" y="84.286250000001"><g 
    id="translateLayer" transform="matrix(1 0 0 1 0 0)"><g id="effectLayer" 
transform="rotate(44.596407613288 67.622727272727 55.46875)" 
fill="#FF4400"><svg viewBox="0 0 657.01 569" width="100%" height="100%" 
preserveAspectRatio="none" overflow="hidden"><g id="Layer_2" data- 
name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon points="0 569 
328.49 0 657.01 569 0 569"/></g></g></svg></g></g></svg>

The transformation happens here

<g id="translateLayer" transform="matrix(1 0 0 1 0 0)"></g>

</div>

Answer 1

After several hours of fighting with code, I got the fix I was looking for.

Below is the final matrix calculation I implemented

x = (x/2);
y = (y/2);
matrix(scaleX 0 0 scaleY (x-scaleX*x) (y-scaleY*y));

https://i.imgur.com/qAaZ1Tl.gifv