Jump to content
Search Community

SplitText with SVG text element problems

PointC test
Moderator Tag

Go to solution Solved by GreenSock,

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

Hey everyone,


I'm trying to use SplitText with some SVG text and having some difficulty.


I've tried using a parent div of the SVG, but I lose positioning and other pieces of the SVG.


I've tried using an ID on the text element itself, but it seems to not give any size to the array of divs.


More details are in my CodePen.





PS the TextPlugin and ScrambleTextPlugin work perfectly with my SVG text.

See the Pen rVPzbO by PointC (@PointC) on CodePen

Link to comment
Share on other sites

Hi PointC,


Just for some more info, the reason your wrap trick "worked" was because SplitText basically takes all content in the target element (which should only be raw html text) and replaces it with the new divs it creates for all the chars, words, lines etc. So in your example, the entire <SVG> was actually being removed completely and replaced by a bunch of divs.


Check out your example in Dev Tools and you'll see the SVG disappears. 



And don't worry, there's no harm in trying a bunch of weird things to see what works and what doesn't... its basically a key part of being a developer;)

Link to comment
Share on other sites

  • 1 year later...

I I know this post is a little old but for anyone who stumbles upon it and is lamenting that they can't use the splitText plugin in an SVG, you actually can inside a foreignobject. This works in both Chrome and Firefox. Haven't tested it thoroughly in all browsers.


I forked one of Carl's examples to create this and used Lorem Ipsum text to see if text wrap would work and it does.


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

  • Like 2
Link to comment
Share on other sites

  • 4 months later...

In case anyone is still trying to use SplitText with SVG/foreignObject, I ran some compatibility tests in Browserstack with swampthang's sweet solution.


There are issues with this workaround in IE, as IE 10 and IE 11 don't support the foreignObject tag.

  • Windows IE 10 and 11: no text shows up at all
  • Windows IE 13 and 14: it mostly works, but the animation is very slow and stuttery
  • Mac Safari 7.1, 8, 9.1 and 10: it does work


Note that using ScrambleTextPlugin on standard SVG text, on the other hand, does seem to work across most all browsers. 

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...