Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
TomN

Embedded SVG object: IE11 and Android - Animation problem

Recommended Posts

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:


 

Thanks for help!

Tom

 

Link to post
Share on other sites

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%' });
Link to post
Share on other sites

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

Link to post
Share on other sites

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)

  • Like 1
Link to post
Share on other sites

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

  • Like 2
Link to post
Share on other sites

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

Link to post
Share on other sites

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). 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×