title: The applying order of SVG transforms
body: <p>In <a href="http://www.w3.org/TR/SVG/coords.html" rel="noreferrer">W3C's spec</a>, it says:</p>
  <blockquote>
  <p>The value of the ‘transform’ attribute is a &lt;transform-list&gt;, which is defined as a list of transform definitions, which are applied in the order provided.</p>
  <p>...</p>
  <p>If a list of transforms is provided, then the net effect is as if each transform had been specified separately in the order provided</p>
  </blockquote>
  <p>When I tried out the follow markups in firefox, chrome and IE10, all three rendered by doing translate first, then following by rotate! See the <a href="http://codepen.io/anon/pen/HGFbj" rel="noreferrer">codepen snippet</a>. What have I missed here? Or the implementations from the 3 browsers are not W3C compliant?</p>
  <pre><code>&lt;svg width=&quot;180&quot; height=&quot;200&quot;
    xmlns=&quot;http://www.w3.org/2000/svg&quot; 
    xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
  
    &lt;!-- This is the element before translation and rotation are applied --&gt;
    &lt;rect x=&quot;0&quot; y=&quot;0&quot; height=&quot;100&quot; width=&quot;100&quot; style=&quot;stroke:#000; fill: #0086B2&quot; fill-opacity=0.2 stroke-opacity=0.2&gt;&lt;/rect&gt;
  
    &lt;!-- Now we add a text element and apply rotate and translate to both --&gt;
    &lt;rect x=&quot;0&quot; y=&quot;0&quot; height=&quot;100&quot; width=&quot;100&quot; style=&quot;stroke:#000; fill: #0086B2&quot; transform=&quot;rotate(45 100 50) translate(50)&quot;&gt;&lt;/rect&gt;
  &lt;/svg&gt;
  </code></pre>