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>
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));
If I understand correctly, you just want to apply transformations with a specific without changing the user coordinate system of the SVG by setting a viewBox which could make it easier.
The origin is the center point of the triangle. That's the half width and 2/3 height of the image in this case.
So why not just apply subsequent transforms rather than struggeling with matrix calculation? And the rotation function even takes origin parameters.
var
svg = document.getElementById('layer_1547759965149_0506449632092969'),
sca = svg.getElementById('translateLayer'),
rot = svg.getElementById('effectLayer'),
deg = 0,
cx = svg.getAttribute('width') / 2,
cy = svg.getAttribute('height') * 2/3
;
function rotate()
{
deg++;
let scale = 1 + Math.sin(deg/180*Math.PI);
rot.setAttribute('transform', (()=>`rotate(${deg} ${cx} ${cy})`)());
sca.setAttribute('transform', (()=>`translate(${cx} ${cy}) scale(${scale} ${scale}) translate(-${cx} -${cy})`)());
}
setInterval(rotate, 50); <svg xmlns="http://www.w3.org/2000/svg" class="layer" id="layer_1547759965149_0506449632092969"
overflow="visible"
stroke="none" stroke-width="0" preserveAspectRatio="none"
width="135.24545454545" height="110.9375"
x="86.896363636365" y="84.286250000001">
<!--<g id="translateLayer" transform="matrix(0 67.622727272725 0 0 73.95833333333333 0)">-->
<g id="translateLayer" transform="matrix(2 0 0 2 0.5 0.5)" transform-origin(200,100)>
<g id="effectLayer"
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></div>