IE SVG transforms

[bigbeats01 0 Likes (Newbie)]

I know in IE, you cannot transform svg child elements normally with the style attribute so you need to fallback to updating the transform attribute on the element within the svg.

TweenMax.to('#circle', 1, {scaleX : 1, onUpdate: scaleXie, onUpdateParams: ["{self}"]});

function scaleXie(t){			
  if(!Modernizr.smil){
  //fallback for IE.
     $(t.target.selector).attr('transform', 'matrix(' + t.target[0]._gsTransform.scaleX + ', 0, 0, 1, 0,0)');
  }
}

This works but is there a more elegant / global way to have TweenMax update the transform attribute on svg elements when the browser is IE ?  I have many of these transform tweens and would like to know if there is a better way at polyfilling IE.  

[Carl 11,108 Likes (Superhero)]

Sorry, GSAP does not do anything special behind the scenes to handle SVG tweens in any version of IE.

[Jonathan 5,389 Likes (Superhero)]

I know this is just my two cents .. but what about wrapping your SVG parent element in a div and animate the div instead? .. or is my two cents worth no cents

[Carl 11,108 Likes (Superhero)]

Jonathan, I'll give you 3 cents for you 2 cents any day!

[bigbeats01 0 Likes (Newbie)]

Thanks but I'm animating an element within an svg, not the entire svg

[Jonathan 5,389 Likes (Superhero)]

Just adding to what you already have bigbeats01 using the jQuery attr() method. You could opt to use GSAP set() method instead, so GSAP can keep track of what values your setting:

TweenMax.to('#circle', 1, {scaleX : 1, onUpdate: scaleXie, onUpdateParams: ["{self}"]});

function scaleXie(t){			
  if(!Modernizr.smil){
     //fallback for IE.
     TweenMax.set($(t.target.selector), {'transform', 'matrix(' + t.target[0]._gsTransform.scaleX + ', 0, 0, 1, 0,0)'});
  }
}

By using set() you are allowing GSAP to write and store the values, so if there is any changes outside of GSAP, it knows what you have changed.

 

[bigbeats01 0 Likes (Newbie)]

Thank you Jonathan