web-dev-qa-db-fra.com

La traduction CSS ne fonctionne pas dans IE11 sur SVG g

Je souhaite déplacer un groupe d'éléments svg à l'aide d'une balise G, mais cela ne fonctionne pas dans IE, même dans la dernière version. Cela fonctionne dans tous les autres navigateurs. S'il vous plaît aider.

Dois-je utiliser un autre moyen de déplacer un groupe d'éléments dans 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);
}
htmlcsscss3internet-explorersvg
17
Curtis

IE11 prend en charge l'attribut de transformation même s'il ne reconnaît pas le style CSS.

Vous pouvez donc simplement définir l'attribut pour qu'il corresponde au style en utilisant JavaScript:

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

g.setAttribute('transform', transform);

Fiddle

28
Rick Hitchcock

si quelqu'un a encore besoin de cela avec jQuery, cela a fonctionné pour moi:

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

Désolé, pas de chance, ça ne fonctionne pas (à partir du 20.02.2015) - voir la page officielle, ici: https://connect.Microsoft.com/IE/feedback/details/811744/ie11-bug-with- implementation-of-css-transforms-in-svg

4
Kjell

Utilisez l'attribut de transformation

transformer = "traduire (10, 0)"

Fonctionne comme un charme sur IE.

Si vous voulez le changer à la volée, utilisez JS

0
MaakuW

si quelqu'un a encore besoin de cela avec angularjs, cela a fonctionné pour moi:

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