title: Make a SVG transform matrix rotate around its center
body: <p>HTML</p>
  
  <pre><code>&lt;rect id="red" style="fill: red;" height="100" width="20"&gt;&lt;/rect&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var layer = 
  {  
      sizeReal   : { "width": 20, "height": 100 }                   
  ,   sizeScaled : { "width": 10, "height": 50 }
  ,   position   : { "x": 200, "y": 200 } 
  
  ,   scale      : 0.5
  ,   rotation   : 0
  ,   matrix     : [ 1, 0, 0, 1, 0, 0 ]
  };
  
  // Not sure if its the cleanest way but it works it rotates itself arounds its center.
  //
  $("#red")[0].setAttribute( 'transform', 'translate(' + layer.position.x + ',' + layer.position.y +') rotate(' + layer.rotation +',' + ( layer.sizeScaled.width  / 2 ) + ',' + ( layer.sizeScaled.height / 2 ) + ') scale(' + layer.scale + ',' + layer.scale +')' ) 
  </code></pre>
  
  <p>Now i want to do the same only with a matrix. I'm using sylvester to multiply the matrixes.</p>
  
  <p>I made a fiddle to make the question clear :)</p>
  
  <p><a href="http://jsfiddle.net/xYsHZ/3/" rel="nofollow">http://jsfiddle.net/xYsHZ/3/</a></p>
  
  <p>I want the red rect to behave the same as the green rect. What am i doing wrong?</p>