Embedded SVG object: IE11 and Android - Animation problem

[TomN 0 Likes (Newbie)]

Hi!

I'm just starting with the JavaScript Version GSAP - awesome!

My question/problem: Animation doesn't start in IE11 and Android <=4.3

 

SVG is embedded as object

<object id="obj" type="image/svg+xml" height="20%" width="20%" data="img/status2.svg"></object>  

 

A rectangle in the svg is selected and animated:

var element = document.getElementById("obj").contentDocument.getElementById('rectangle');

TweenMax.to(element, 1, { rotation:30, transformOrigin:'50% 50%' });

No problem in Chrome and FF, but in IE11 and Android <4.4

 

I can't provide a codepen demo because of cross domain restrictions (embedded object) but here is a link:

http://www.e-challenge.de/greensock/animation.html

 

Thanks for help!

Tom

 

[Diaco 1,948 Likes (Superhero)]

Hi TomN 

 

try this way :

var svgDoc = document.getElementById("obj").getSVGDocument();
var Rectangle = svgDoc.querySelector("#rectangle");
TweenMax.to(Rectangle , 1, { rotation:30, transformOrigin:'50% 50%' });

[TomN 0 Likes (Newbie)]

Hi Diaco,

 

thanks for your answer, but svgDoc.querySelector("rectangle") is null. The selection

var element = document.getElementById("obj").contentDocument.getElementById('rectangle');

is valid in all browsers, e.g. IE11 changes the fill color

element.setAttribute("fill", "red");  //ok in IE11

but TweenMax doesn't recognize the element.

 

Thanks 

Tom

[jamiejefferson 1,185 Likes (Superhero)]

Well, TweenMax definitely "recognises" the element and is applying all of the tweened styles (as evidenced by it working in Chrome and Firefox). There's a limitation in the other browsers that prevents transform styles from working unless they are added as attributes to the tag instead of as styles. There was a recent update to GSAP that detected this issue and used attributes instead, but it would appear to just be applying to inline SVG at the moment.

 

(also Diaco's selection method was just missing a # for ID in the querySelector)

[GreenSock 8,117 Likes (Superhero)]

It looks like this has to do with some conditional logic failing to recognize the element as an SVG element because it's segregated into its own document (sorta), so there's a different SVGElement used in that case. Anyway, I think I've got a solid workaround in place now, which will be in 1.14.3. I have attached a preview - please let me know if it works well for you.

GSAP_1.14.3_preview4.zip

[TomN 0 Likes (Newbie)]

Hi Jack,

thanks (!!), works like a charm now. I tested TweenMax.

Seems like TweenLite has some issues with the animation, but maybe my bug.

Again thanks and regards

Tom

[GreenSock 8,117 Likes (Superhero)]

Glad it's working well for you. 

 

You mentioned that TweenLite was having some issues - could you clarify? I wonder if you just forgot to load CSSPlugin or something (remember, TweenMax has CSSPlugin inside of it, but if you are only using TweenLite you'd need to load CSSPlugin too in order to animate CSS-related properties).