html - tag - svg fallback

El traductor CSS no funciona en IE11 en SVG g

Question

Quiero mover un grupo de elementos svg utilizando una etiqueta G, pero no funciona en IE, ni siquiera en la última versión. Funciona en todos los demás navegadores. Por favor ayuda.

¿Necesito usar alguna otra forma de mover un grupo de elementos en un 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

IE11 es compatible con el atributo de transformación aunque no reconoce el estilo CSS.

Así que simplemente puede configurar el atributo para que coincida con el estilo usando JavaScript:

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

Fiddle

Answer 2

Lo siento, Curtis, no hay oportunidad de hacer que esto funcione (a partir del 20.02.2015) - vea la página oficial es decir: https://connect.microsoft.com/IE/feedback/details/811744/ie11-bug-with-implementation-of-css-transforms-in-svg

Answer 3

Si alguien todavía necesita esto con angularjs, esto funcionó para mí:

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

Si alguien todavía necesita esto con jQuery, esto funcionó para mí:

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

Answer 5

Usa el atributo de transformación

transform = "traducir (10, 0)"

Funciona como un encanto en IE.

Si quieres cambiarlo sobre la marcha, usa JS