Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

No textPath support? #164

Closed
zakdances opened this Issue Jan 5, 2014 · 3 comments

Comments

Projects
None yet
3 participants

After searching the docs, I wasn't able to find any reference to textPath (or anything equivalent). Is there a way to place text along a path? If not, is there plans to add this feature?

Collaborator

ibrierley commented Jan 5, 2014

I couldn't find a proper way to do this, so I did have a workaround .. http://svg.dabbles.info/snaptut-parse.html I do think it would be useful to have something proper in Snap though (apologies if I've missed it).

Your workaround works, but Snap.svg should definitely have a solution that doesn't require you to put your markup into a string. Take a look at textPath API that SVG.js provides here.

// A nice feature in SVG.js is the ability to run text along a path:
var text = draw.text(function(add) {
  add.tspan('We go ')
  add.tspan('up').fill('#f09').dy(-40)
  add.tspan(', then we go down, then up again').dy(40)
})
text
  .path('M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100')
  .font({ size: 42.5, family: 'Verdana' })

A good approach, and it also supports multiple lines of text, styling, and animation. Would adding a similar API to Snap.svg be difficult?

Contributor

DmitryBaranovskiy commented Jan 5, 2014

There is an attribute textpath that you can use on text elements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment