SVG Animations in IE

[dxc]

Oh how I hate IE. I have this working in all browsers, including mobile iOS. The only place it doesn't work is in ie. Everything shows up as it should, but none of the movements happen. I'm not even sure where to start. Thanks for your help! Here's the non-codepen version if that helps: http://aprendagames.com/stock/error_pages_robot/headlessRobot/?errorcode=404

See the Pen mnbLK by anon (@anon) on CodePen.

[jamiejefferson]

IE doesn't support CSS transforms on SVG elements. You need to use the transform attribute of the element, although that doesn't really help with the transformOrigin.

e.g.

function svgTransformIE(){
  // include a check for IE first?
  var t = this.target;
  t.setAttribute('transform', t.style.transform)
}

// transform origin doesn't have an equivalent attribute so it won't apply in IE
TweenMax.to(foo, 1, {rotation:100, transformOrigin:"129px 154px", onUpdate:svgTransformIE});

Not sure if there's a workaround for transformOrigin...

[Diaco]

Hi dxc 

 

i think if that's really important to work in IE , you can put the SVG parts into same size Div and animate the divs or use Raphaël / another SVG JavaScript Library .

[dxc]

Oh, I didn't realize transformOrigin wouldn't work in IE. That makes life a little tougher. I may have to just be content with the animation not working in IE . . . stupid IE.