SVG - multiline <text> or <tspan> in an SVG

[SJH]

This is related to this thread. Jack came up with a great solution for a multi-line typewriter solution! He really did! But now I'm trying to make multi-line SVG text fields within the SVGs themselves so I don't have to use JavaScript to position the typewriter text on the page. I'm setting the value of the text for the typewriter dynamically.

 

The main problem I'm running into is within the SVG itself. I can achieve the typewriter effect within the SVG but I don't know how to break the text across multiple lines, here's the example code within the SVG:

<text transform="translate(450 287)" fill="#f00" font-family="Roboto-Bold, Roboto" font-size="8" inline-size="50">
        <tspan id="text" x="0" y="0" letter-spacing=".11em">This text will be replace by the typewriter effect</tspan>
      </text>

As you can see, I tried to use inline-size because I read it was the syntax to create line breaks but it's not working.

You'll need to look at the thread I'm referencing above to give you context.

 

Click on the icon to change the SVG viewbox and begin the typewriter code. The white text is the wrapper div in the html; the red text is the text within the SVG block.

See the Pen yLxLwLZ by sandalwoodsh (@sandalwoodsh) on CodePen

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[SJH]

https://codepen.io/sandalwoodsh/project/editor/AezBkm

 

It's not a pen but a project. Rather than one big blob of code I've separated them into individual files. Hope that helps.

[GSAP Helper]

Thanks. I don't have time to look right now, but it's definitely much, much better to just provide a very simple CodePen demo (not a project where things are split across a bunch of different files and we have to dig into them all individually and try to hunt things down). 

 

Just one SVG and maybe one tween. The more focused your minimal demo, the faster and more accurate answer you'll get

[SJH]

added minimal demo at top of this thread

[GreenSock]

23 hours ago, SJH said:

I can achieve the typewriter effect within the SVG but I don't know how to break the text across multiple lines, here's the example code within the SVG:

SVG text can't wrap (automatically) as far as I know. You must have a different tspan for each line. It's just how SVG works.

 

Maybe this will help you do it programmatically: https://stackoverflow.com/questions/24784302/wrapping-text-in-d3?lq=1

 

FYI, your demo had two different elements with the id of "text" which is invalid markup. Maybe use classes instead. And you can't append and HTML <span> as a child of a <tspan>. 

 

I have no idea if this will help you at all, but if you want to position an HTML element based on something else in an SVG, perhaps look at https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.convertCoordinates()

 

Good luck!

[SJH]

Thanks Jack, I will look into your suggestions.

Quote

FYI, your demo had two different elements with the id of "text" which is invalid markup...

I knew that I had two elements with an id of "text". That's how I accidentally stumbled upon the fact that I could use the typewriter effect to re-write the text within an SVG. My thinking behind changing the text in the SVG rather than floating the "wrapper" on the screen via JavaScript was so that I wouldn't have to figure out the coordinates to move my "wrapper". Looks like I'll have to do that anyway. Thanks again for the suggestions and links.