CODEWITHSUNDEEP
htmlcssinternet-explorersvg
Curtis
Curtis

Reputation: 2535

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, although it works in all the other browsers.

Do I need to use some other way of moving a group of elements in an svg?

svg {
  width: 20px;
  height: 20px;
}

g {
  transform: translate(10px, 0);
  -ms-transform: translate(10px, 0);
}
<svg viewbox="0 0 20 20">
    <g>
        <circle cx=10 cy=10 r=10 />
    </g>
</svg>

Upvotes: 26

Views: 18641

Answers (4)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

IE11 supports the transform attribute in SVG even though it doesn't recognize the CSS style.

Fortunately, 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);
svg {
  width: 20px;
  height: 20px;
}

g {
  transform: translate(10px, 0);
  -ms-transform: translate(10px, 0);
}
<svg viewbox="0 0 20 20">
  <g>
<circle cx=10 cy=10 r=10 />
  </g>
</svg>

Upvotes: 39

MaakuW
MaakuW

Reputation: 11

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

Upvotes: 1

Eydrian
Eydrian

Reputation: 10818

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

Upvotes: 0

another user
another user

Reputation: 61

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

Upvotes: 6

Related Questions