title: Providing the x,y,width and height value, how do I get the svg transform matrix that scales from center
body: <p>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?</p>
  
  <p>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. </p>
  
  <p>Currently, the transition starts from the left. I want to translate it using matrix.</p>
  
  <p>The link below is the example gif of the current implementation
  <a href="https://i.imgur.com/juMX3uD.gifv" rel="nofollow noreferrer">https://i.imgur.com/juMX3uD.gifv</a></p>
  
  <p><strong>Transformed SVG</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;&lt;g 
      id="translateLayer" transform="matrix(1 0 0 1 0 0)"&gt;&lt;g id="effectLayer" 
  transform="rotate(44.596407613288 67.622727272727 55.46875)" 
  fill="#FF4400"&gt;&lt;svg viewBox="0 0 657.01 569" width="100%" height="100%" 
  preserveAspectRatio="none" overflow="hidden"&gt;&lt;g id="Layer_2" data- 
  name="Layer 2"&gt;&lt;g id="Layer_1-2" data-name="Layer 1"&gt;&lt;polygon points="0 569 
  328.49 0 657.01 569 0 569"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>The transformation happens here</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;g id="translateLayer" transform="matrix(1 0 0 1 0 0)"&gt;&lt;/g&gt;</code></pre>
  </div>
  </div>
  </p>