title: SVG transform-origin not working in Chrome
body: <p>I have a SVG based app that makes heavy use of transformation such as translates, rotates and scales. While I have no issue in Firefox, in Chrome, the <code>transform-origin</code> property is not taken in account. It seems to apply the user-agent default value <code>0px 0px 0</code>.</p>
  
  <p>Here is an example (<a href="https://jsfiddle.net/Ucodia/2hyvffkx/" rel="noreferrer">JSFiddle</a>):</p>
  
  <pre><code>&lt;svg width="400" height="400"&gt;
    &lt;defs&gt;
      &lt;rect id="shape" width="200" height="200"/&gt;
    &lt;/defs&gt;
    &lt;g transform="translate(100,100)"&gt;
      &lt;use xlink:href="#shape" style="stroke: lightgray; fill: transparent;"/&gt;
      &lt;ellipse cx="100" cy="100" rx="3" ry="3" style="fill: black;"/&gt;
      &lt;g transform="translate(0,0) scale(0.5) rotate(45)" style="transform-origin: 100px 100px;"&gt;
        &lt;use xlink:href="#shape" style="stroke: black; fill: transparent;"/&gt;
      &lt;/g&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/RRxgt.png" alt="transform-origin issue"></p>
  
  <p>As you can see Chrome applies all transformation from top left corner of the shape regardless of the defined origin while Firefox respects the defined origin.</p>
  
  <p>Am I missing something about how <code>transform-origin</code> works with SVG?</p>
  
  <p>Does anyone actually found a way to fix this without compensating with translates?</p>