.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
SVG Gotchas!
Hey all,
It should be no secret that GSAP does a ton of work to get around SVG-related browser bugs and some serious heavy lifting to make working with SVG as similar to DOM/CSS as possible. We did our best to outline these strengths here: http://greensock.com/svg-tips
However, the workflow of designing an SVG in Illustrator (or other programs) and getting it to play nice can be a little challenging. Why is illustrator renaming my layers? Why did it put a transform on that thing? Why is
Everything about getBBox is a gotcha. For those that don't know what it is, it's a method on SVG elements that will return its position and size...
var bounds = someElement.getBBox(); // => { x: 0, y: 0, width: 100, height: 100 }
Sounds pretty useful as positioning is an important part of animation. The problem is that it reports its bounding box without any transforms applied. What does that mean? If you have an element at 0,0 and tween it to 100,100 using x and y, and t
