Jump to content
Search Community

SVG foreignObject nightmare

swampthang test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Playing with the machine gun text effect from

See the Pen cmiue?editors=1010%C2%A0 by mfgpker (@mfgpker) on CodePen


I need to be able to export these frames as PNG images but running into some trouble because of the way foreignObjects are seen I suppose.


The original version of the machine gun text animation used jquery to create and address elements and, though the text was visible in the resulting PNG exports, the positioning information was completely ignored - even though the animation runs fine in the browser.


So, I decided to go to great pains to namespace everything in case that was the issue. The animation works fine, but now, the exported images don't show the text at all. 


The other thing I wondered was if I needed to move the styles into the SVG or the foreignObject but that hasn't solved the real problem.


I'm pretty sure it has to do with the way XMLSerializer is seeing or processing the data from the master SVG so I've been scouring the Internet to see if anyone else might have encountered this issue. Coming up dry. 


Is there anything I can do with GSAP's animation settings to circumvent what's happening in a way XMLSerializer would be able to process accurately?

See the Pen apZWdd?editors=1010 by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

This is fixed here...

See the Pen QdEOjb by swampthang (@swampthang) on CodePen


The only difference? I removed the namespace declaration from the foreignObject element! So instead of...

<foreignobject xmlns="http://www.w3.org/1999/xhtml" class="node" x="0" y="0" width="800" height="300">

I changed it to...

<foreignobject class="node" x="0" y="0" width="800" height="300">

and it started working. Another important thing to note - I definitely needed the styles to be placed inside the SVG. Works in Firefox too.


For some reason, I was under the impression that one has to add the xmlns namespace to the foreignObject to get it to work.




My little pea-brain.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...