CSS translate not working in IE11 on SVG g

Question

I want to move a group of svg elements using a <g> tag, but it isn't working in IE, even the latest version, although it works in all the other browsers.

Do I need to use some other way of moving a group of elements in an svg?

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>

Answer 1

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>

Answer 2

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);     });