Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PointC

SplitText with SVG text element problems

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.

 

Thanks.

 

 

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

  • Solution

Sorry, but SplitText is meant for regular DOM text, not SVG. SVG is a completely different beast.

  • Like 1
Link to comment
Share on other sites

Thanks Jack.

 

I actually didn't think it would work, but in my experiment with it wrapped in a containing div, it does animate the text so I was foolishly trying to make it work.  :oops:

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

Oh, and the SplitText page and docs have been updated to mention that it isn't intended for use with SVG <text>.

  • Like 1
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.

×