When you set coordinates to position SVG text, you’re setting the location of the left edge of the text and you’re setting the location of the baseline of the font. Last week I showed how you could adjust the former through the text-anchor attribute and today I want to show you how you can adjust the latter.
Archives
How To Use SVG Font Properties
I’ve said throughout this series that SVG text gains the best of both worlds in that it’s rendered as a graphic while still being selectable and searchable text.
How To Work With The SVG Text Spacing Properties
Most of the time the default spacing between characters and words is perfectly fine, but when working with display type in headlines and subheads you may want to adjust the spacing in your text. SVG provides a way to do just that.
SVG Text On A Path — Part 1
In addition to laying out text in a straight line SVG includes the ability to have text laid out along any path you create. This opens up many possibilities for displaying text. It’s easy to set up. And the results are fun.
SVG Text On Path—Part 2
Creating SVG text along a path opens up some interesting and creative possibilities. Last week I showed you the <textPath> element and how to add a reference to a path you define. I also showed you the startOffset attribute so you can position the text somewhere along the path other than the start.