[Problem with animating Foreign Object element nested in SVG]

On 01/02/2018 at 4:27 PM, OSUblake said:

foreignObject is just problematic for animations, rendering artifacts are common, and it doesn't work in IE. I would just overlay scaled HTML text.

 

 

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.

[Problem with animating Foreign Object element nested in SVG]

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.

[Problem with animating Foreign Object element nested in SVG]

17 hours ago, OSUblake said:

Not sure why you even need svg for this. Everything in your demo can be done with HTML. Messing with foreignObject is trouble. The only reason I would ever use it is to render HTML to a canvas element.

 

If you want to scale text, you can use an aspect ratio to figure out the scale value.

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.

[Problem with animating Foreign Object element nested in SVG]

19 hours ago, Visual-Q said:

I'm not sure if a global transform scale on the entire svg would work as you want I guess you'll just have to try and see. It would be a magic bullet if it did, I'm doubtful it would be that simple.

 

Here's a post about transforms on svg though it seems to be mainly about applying it to internal objects not global transform on the entire svg which is what I think you're after. May be useful info in it though.

https://css-tricks.com/transforms-on-svg-elements/

 

Another post about placing and sizing, scaling svgs

https://css-tricks.com/scale-svg/

 

I don't see any discussion of foreign objects in these though.

 

 

 

 

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.

[Problem with animating Foreign Object element nested in SVG]

On 26/01/2018 at 1:32 AM, Visual-Q said:

Why do you need to do it inside an svg. The animation you are creating can be created regular html elements, it doesn't need to be inside an svg container. At the very least the text doesn't. 

 

As noted if you must use svg I think svg text would be much better than injecting html text.

 

Regardless, if you are injecting html text in the svg and you know the size of the svg relative to the dom is consistent. Ie 100% wide, 50% wide etc you could apply font size based on vw viewport width units. You'll also likely have to tinker with the html containers including the size of the foreign object itself , I don't believe the svg will trigger them to resize, they will probably have to have percentage or viewport based sizing which will hopefully be honored within the svg rather than arbitrary pixel based sizing.

 

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

[Problem with animating Foreign Object element nested in SVG]

On 26/01/2018 at 12:32 AM, mikel said:

Hi @LachlanTS,

 

Why are you making it so hard for you?

 

SVG text in paths can solve the task.

 

Kind regards

Mikel

 

 

 

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

[Problem with animating Foreign Object element nested in SVG]

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:

See the Pen 129a5aa1d5144b8a1d875ad4ff23d6a7 by lachlants (@lachlants) on CodePen

 

And here's how it looks when the SVG is set to Width: 50%:

 

And the Codepen:

See the Pen 7ded3187df907ed11f2940e87cd383a9 by lachlants (@lachlants) on 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

 

 

 

See the Pen 7ded3187df907ed11f2940e87cd383a9 by lachlants (@lachlants) on CodePen

[SVG not displaying in IE]

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!

[SVG not displaying in IE]

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:

 

 

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

See the Pen bed88f588e7c90bd4efb5df6e80da438 by lachlants (@lachlants) on CodePen