Jump to content
Search Community

SVG, transforms and IE

Thatemil test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello people!

 

I was wondering if anyone has experience using Greensock to tween elements in inline SVG and getting it to work in IE (9 and up)?

 

I'm creating a site with a lot of animations going on, and the graphics are pretty much exclusively in SVG.

Most of the time, I'm wrapping inline SVG in HTML elements and then animating those, but in some instances, I really need to animate elements within the inline SVG document (e.g. moving things inside of a clip-path). Specifically (so far), I've wanted to move stuff by animating x/y.

 

This works great in Chrome, Firefox, Safari (iOS and desktop), but fails in IE. It's really hard to debug why it's not working, so I thought I'd ask around if anyone has faced the same issues, or had ideas on why this is.

 

No code sample at this point, but will try to provide one if needed.

Link to comment
Share on other sites

Hello and welcome to the GreenSock Forums!

 

If possible could you provide like a limited

See the Pen by pen (@pen) on CodePen

or jsfiddle so we better help you to see your code in context in a live editable environment.. or a link to your webpage that is giving the problem.

 

It will help us better in helping you!

  • Also are you seeing this issue in real standalone IE9? ..
  • or is this happening in a different rendering mode in a different version of IE?

browser support for SVG:

http://caniuse.com/svg

 

thx :)

  • Like 1
Link to comment
Share on other sites

Code example: http://jsbin.com/ikAbOMeL/1/edit - Works well in Chrome (latest), Fx (latest), Safari (7).

 

Using the virtual machines from http://modern.ie to test, so yes, pure standalone IE:s in clean VM:s, no compatibility mode shenanigans.

 

IE9 has support for SVG (both inline and embedded etc), as does 10 and 11. All of them also support CSS transitions. However, IE being IE...

 

I remembered that IE11 has way better devtools in terms of live updating of the DOM view, so I checked there: the style-attribute does indeed get updated with the "transform: matrix()"-values as the Tween runs, but nothing happens in terms of visual rendering.

 

This might well be an issue with IE:s handling of CSS transforms on SVG elements, but my Google-Fu has brought up little of value so far...

 

EDIT: This post claims that IE10 (at least) does not support CSS transforms on SVG elements, but I have yet to find a definitive source on that. Would explain it.
I'm very new to Greensock, but maybe animating attributes á la this SO post would work better? In this case, specifically the SVG "transform" attribute...

Link to comment
Share on other sites

Alright, looks like I've solved my own problem. Documenting the solution here for anyone else who might run into this:

 

  • IE9-11 seemingly does not apply CSS transforms to SVG elements in the DOM. Haven't found an authoritative source on this, yet.
  • However, SVG supports transforms via the "transform" attribute directly on SVG elements.
  • Therefore, it's possible to do transforms on SVG elements via Tweens on an intermediate object and an onUpdate callback, that manipulates the "transform" attribute value directly.

Initial, broken (in IE9+) code example here: http://jsbin.com/ikAbOMeL/1/edit

 

Fixed example here: http://jsbin.com/ikAbOMeL/5/edit

 

Let me know if you guys spot any mistakes & thanks for quick responses. The greensock community seems like a nice one! :-)

  • Like 3
Link to comment
Share on other sites

Cheers, Jonathan!

 

Sadly, none of Microsoft's support pages mention anything about differences about CSS transforms as applied to HTML vs applied to SVG (SVG in general uses the CSS model of styling, with some special properties, but I believe it was specced before the CSS3 modules for transforms etc existed, so I guess the behavior is somewhat undefined).

Link to comment
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.
×
×
  • Create New...