curtis curtis - 5 months ago 166
HTML Question

CSS translate not working in IE11 on SVG g

I want to move a group of svg elements using a G tag, but it isn't working in IE, even the latest version. It works in all other browsers. Please help.

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

http://jsfiddle.net/ahKpq/3/

<svg viewbox="0 0 20 20">
<g>
<circle cx=10 cy=10 r=10 />
</g>
</svg>

g {
transform: translate(10px, 0px);
-ms-transform: translate(10px, 0px);
-sand-transform: translate(10px, 0px);
-webkit-transform: translate(10px, 0px);
}

Answer

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

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

Fiddle

Comments