CSS перевод не работает в IE11 на SVG g

Я хочу переместить группу элементов svg с помощью тега G, но он не работает в IE, даже в последней версии. Он работает во всех других браузерах. Пожалуйста, помогите.

Нужно ли использовать какой-либо другой способ перемещения группы элементов в 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);
}

Ответы

Ответ 1

IE11 поддерживает атрибут преобразования, даже если он не распознает стиль CSS.

Итак, вы можете просто установить атрибут в соответствии со стилем с помощью JavaScript:

var g= document.querySelector('g'),
    transform= getComputedStyle(g).getPropertyValue('transform');

g.setAttribute('transform', transform);

Fiddle

Ответ 2

Если кому-то все еще нужно это с jQuery, это сработало для меня:

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

Ответ 3

Извините, не хочу, чтобы эта работа (по состоянию на 20.02.2015) - см. официальную страницу здесь: https://connect.microsoft.com/IE/feedback/details/811744/ie11-bug-with-implementation-of-css-transforms-in-svg

Ответ 4

если кому-то все еще нужно это с angularjs, это сработало для меня:

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

Ответ 5

Использовать атрибут преобразования

transform = "translate (10, 0)"

Работает как очарование IE.

Если вы хотите изменить его на лету, используйте JS