Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

1,419 profile views

LachlanTS's Achievements



  1. Thanks, yes this is our fall back if the foreignObject approach doesn't work. In the set of animations we'll be creating, masking will be pretty essential and could be become quite complicated. One advantage we get with having the text as an HTML foreignObject rather than HTML text layered on top of the SVG; is we get to use SVG masking for both the text and SVG graphics, rather than having to replicate the masks in HTML for the text and sync the timing for both sets of masks. With this in mind, I'd prefer not to have to create the masks in both SVG and HTML. Having said this, if foreignObject just doesn't work for us and we get rendering artifacts, we'll have to settle with layering HTML text on SVG graphics. We've also accepted that IE won't be compatible with the app.
  2. After further experiments with the foreignObject nested inside a scaled SVG element; it appears that any CSS transform applied to an HTML element nested in a foreignObject resets the positioning/scale of the HTML element to a position/scale as if the SVG wasn't scaled. Given Greensock animations of DOM elements uses CSS transform, this will apply a CSS transform to the nested HTML element and reset it's positioning.
  3. Thanks @OSUblake. You're right that the above animation could be done easily with just HTML, unfortunately, as I mentioned above, this is a very basic demo of a very large series of far more complicated animations that will require SVG to create the graphics. Scaling the text independently is also a viable option but given the large volume of animations and that fact that the scaling is done dynamically by the user; we were hoping to streamline the process and only require the scaling of one container element, rather than several different scaling calculations occurring at once as the user dynamically scales the animation.
  4. Thanks @Visual-Q. Yes, the css-tricks link is what we've been working off for the transform. It appears to work in isolated tests; it's just a matter of implementing it into the web application's current UI setup.
  5. Thanks @Visual-Q. As I replied to Mikel, the animation is only a basic sample of a set of more complicated/detailed animations that respond to user input; which is the reason for not using regular HTML elements. Your text resizing suggestions sound good and like they would work. The issue is that given a user is dynamically resizing the entire animation container, I was hoping to find a solution that would resize both the animation and text at the same time, rather than complicating it with separate calculations for both. Basically, the above animation is a simple prototype for a large set of animations and we're looking for a consistent way to have each animation be scaled by the user, while also being able to use advanced text features such as multi-line wrapping. Does it sound like the CSS transform: scale applied to the SVG is the best solution based on this? Thanks, Lachlan
  6. Thanks @mikel. Yes, I appreciate SVG text would be a much easier solution, but the above animation isn't a one-off; it's part of a large set of user-editable animations that are more complicated than the example I sent through. Unfortunately, SVG text is currently quite limited and doesn't offer multi-line text wrapping (easily), which is a feature we require for the animations. I'm aware that we can manually create text wrapping with <tspan> SVG elements, but this adds a level of complexity that we would prefer to avoid if possible. Thanks, Lachlan
  7. I'm having an issue with animating an HTML element nested inside an SVG with <foreignObject>. When the SVG is set to 100%, there's no problem, but when it's dimensions are scaled the <foreignObject> elements don't honour the resizing of the parent SVG when they're animated and act as if the SVG were set to 100%. Here you can see how it looks at 100%: And here's the Codepen: And here's how it looks when the SVG is set to Width: 50%: And the Codepen: Love to hear if there are any solutions to this? I'm aware that using the transform: scale on the SVG will solve this, but hoping to find a way to use SVG built-in resizing to save some work at implementing this. Thanks in advance, Lachlan
  8. Thanks everyone for your thoughts on this issue, gave me a few clues to go on. The problem ended up being that IE doesn't support CSS3 transforms on the <SVG> element. To solve this I had to wrap the SVG's in a DIV and perform the transforms on the DIV, rather than directly on the SVGs. Although a little clunky, this ultimately solved it. Here's a little more about the issue: http://stackoverflow.com/questions/21298338/css-transform-on-svg-elements-ie9 Thanks again!
  9. Hi all, Hoping someone can help me out with an issue I'm having with the animated SVGs in my animation not displaying in IE. Bascially, there's one large SVG that takes up the whole background and then 3 smaller SVGs that are animated next to standard text. I've worked through few suggestions via these forums without any luck so far. All fine in other browsers, but with with IE I'm not even able to view the SVGs to even work out if they're animating correctly or not. Here's the codepen link: http://codepen.io/lachlants/pen/bed88f588e7c90bd4efb5df6e80da438 Further to this, the performance seems to be a bit laggy. Especially on mobile. Love some pointers if someone can help out. Thanks in advance, Lachlan