SVG transform property not taking acount in IE Edge

Question

The JSFiddle below is an SVG drawing, with 2 brown rectangle <rect> spaced each other and that have both a group <g> that have a class class="group" which applies a transformation (rotation and translation).

JSFiddle

Refering Caniuse.com, that gave most of the support rate for major browsers, it shows that IE9+ support SVG transform property, and it says on Know issues :

IE 10 and below does not support CSS transforms on SVG elements (though SVG transform attributes do work).

QUESTION

Despite the fact my only source is this website, I would know if we figured out why IE Edge does not support transform property at this time (december 2015) ?

QUESTION 2

Is there any alternative to apply a CSS transformation which would be supported by IE (Edge), Chrome and Firefox ?

NOTE

JSFiddle tested successfuly on Chrome and Firefox. Only IE fails the test in both version (5, 7, 8, 9, 10, Edge).

Answer 1

Through CSS, I think it's not supported in IE or Edge.

The attribute is working, I have tested that, so I think we have to change the method of implementation.

<g class="group" transform ="translate(100, 100) rotate(90)">

Do it manually or, if <g class="group"> is already created, then use javascript or jquery for append this attribute to <g class="group">

Snippet

<svg width="500px" height="500px">
  <g class="group" transform ="translate(100, 100) rotate(90)">
    <rect width="100px" height="10px" fill="brown"></rect>
    <rect x="50px" y="50px" width="100px" height="10px" fill="brown"></rect>
  </g> 
</svg>