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?


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

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


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


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

        transform = jQuery(this).css('transform');

Sorry, curtis, no chance to get this working (as of 20.02.2015) - see official ie page here: https://connect.microsoft.com/IE/feedback/details/811744/ie11-bug-with-implementation-of-css-transforms-in-svg

if someone still needs this with angularjs, this worked for me:

.directive('ieTransform', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var elementStyleMap = $window.getComputedStyle(element[0], null);
            var transform = elementStyleMap.getPropertyValue('transform');

            element[0].setAttribute('transform', transform);

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

Need Your Help

When to use a View instead of a Table?

sql database-design view

When should a View actually be used over an actual Table? What gains should I expect this to produce?