Chrome issue SVG transform

Question

I'm trying to position a svg rectangle with transfrom=translate(). When I tested it, I saw that it doesn't work in Chrome but works nice in Firefox.

I also tried in Chrome with -webkit- but doesn't work either.

In the code snippet you can see whats the problem when its open with Chrome.

Does anyone now a workaround for this or am I doing something wrong?

<svg transform="translate(100,0)">
  <rect width="200" height="200" style="fill:blue;;stroke:black" />
</svg>
<br><br>
<svg style="transform:translate(100px,0)">
  <rect width="200" height="200" style="fill:blue;;stroke:black" />
</svg>

https://jsfiddle.net/suf2reee/

Answer 1

I think this is a SVG 1.1 vs SVG 2 issue. In SVG 1.1, which is the version that browsers generally support, the transform attribute was not valid for the <svg> element. It is allowed in SVG 2.

Firefox have started implementing some SVG 2 features, whereas Chrome is not so far along.

The simplest solution is just to put your transform on the <rect>.