Jump to content
GreenSock

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

SVG: create new text and move it along a path

Recommended Posts

Hey there, 

 

i did understood how text motion along a path is working but i struggle around with a problem, when i need to create the text element dynamically. For example if i have different languages or just random text, i would like to prefer to create those texts outside of illustrator.

 

Something seems to be wrong with appending the path. I also don't get it working, if i have a static text element in the svg and try to append a textpath to it. 

 

Both of em seem to be correct according to dom inspector but they are somewhere out of the viewport as it seems. It was inspired by some Trick posts of @PointCbut everything was just static elements in the svg.

 

What am i doing wrong? :(

See the Pen OJXeymO by chrisi51 (@chrisi51) on CodePen

Link to post
Share on other sites

I'm not sure I follow everything you're trying to do in your demo, but if you just want to change the text that follows the path, the easiest thing would be to change the textContent of the text node. Here's a fork of my original demo with that example.

 

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

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 4
  • Haha 1
Link to post
Share on other sites

Thank you for your response @PointC - its not exactly what i was looking for but it points out a way i could go probably. 

 

My main problem on this is, that adobe illustrator don't give me a way to place text on a path without dropping the information. instead it exports the text, where each letter is simply positioned, as it would follow the path. so path is gone and text is also gone. so i can't animate it afterwards. Just tried affinity designer which does the same :(

 

So my plan was to just draw the paths, on which text will move along and than place my text afterwards via javascript. So i would be Independent of the design layer and also could switch languages. 

 

But for any reason the appending of the textpath is not working. I know its not really a gsap issue but hoped you will know this problem and give advice on how to fix it :)

Link to post
Share on other sites

just realized that i need another function to add xlink:href

 

instead of textpath.setAttribute('xlink:href', "#masterpath"); you have to use textpath.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "#masterpath"); 

 

so i can draw my paths now in illustrator and put text on em afterwards. 

  • Like 3
Link to post
Share on other sites

Good work and thanks for letting us know you're now on the right path. See what I did there? ;)

 

  • Like 1
  • Haha 2
Link to post
Share on other sites
1 hour ago, PointC said:

See what I did there? ;)

 

@PointC What do you mean? did you changed any on your pen? i don't get it 😅

Link to post
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.

×