Jump to content


SVG: create new text and move it along a path

Go to solution Solved by chrisi51,

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 comment
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 comment
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 comment
Share on other sites

  • Solution

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 comment
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 3
Link to comment
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 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.