CSS translate not working in IE11 on SVG g

Use the transform attribute

transform="translate(10, 0)"

Works like a charm on IE.

If you want to change it on the fly, use JS


IE11 supports the transform attribute in SVG even though it doesn't recognize the CSS style.

Fortunately, you can simply set the attribute to match the style using JavaScript:

var g = document.querySelector('g'),
    transform = getComputedStyle(g).getPropertyValue('transform');
    
g.setAttribute('transform', transform);
svg {
  width: 20px;
  height: 20px;
}

g {
  transform: translate(10px, 0);
  -ms-transform: translate(10px, 0);
}
<svg viewbox="0 0 20 20">
  <g>
<circle cx=10 cy=10 r=10 />
  </g>
</svg>

if someone still needs this with jQuery this worked for me:

jQuery("g").each(function(){
        transform = jQuery(this).css('transform');
        console.log(transform);
        jQuery(this).attr('transform',transform);
    });