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. 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 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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