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>