Jump to content


  • Posts

  • Joined

  • Last visited


3 Newbie
  1. 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).
  2. 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!
  3. 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...
  4. 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.