Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

3 Newbie

About Thatemil

  • Rank
  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
  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
  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 an