(SVG 2 proposes to change this, but browsers aren’t yet on board.) Unfortunately, startOffset is not enough here: although it shifts the text around the shape, it doesn’t change the fact that text gets cropped off when it reaches the path start and end points. If you’re manipulating SVG with scripts rather than visual editors, Mike Kamermans has created a JavaScript utility to do the reversal.įinally, you may want to adjust the starting point of the text to a position other than the starting point from the path code. In Inkscape, select the path, and use the Reverse option in the Path menu. This assumes that the path is a compound path (Object → Compound Path → Make). In Adobe Illustrator, there is a Reverse Path Direction command in the application’s Attributes panel (you may have to use Show Options in the top right corner of the panel to see the path direction controls). If your path is in the wrong direction, your graphics editor can reverse it for you: In either case, it is possible to end up with upside-down letters. If the path is counter-clockwise, the text will be on the inside. If your paths have a clockwise winding order, the text will be on the outside of the shape. The text will proceed along the path in the direction the path is drawn in the code. If a counter-clockwise circle or ellipse is all you need, Dan Hansen’s neat little JavaScript tool to grab the equivalent path data.

In some editors, including Illustrator, moving any point on a regular shape, even slightly, will also convert it into a path. In Illustrator, use Object → Compound Path → Make in Inkscape, use Path → Object to Path. Most visual editors have tools to convert the shape into a path.

If you have a basic shape, and want to convert it to a without having to code or draw it one point at a time, there are various tools you can use: This can be somewhat frustrating, as they (along with ellipses) are the most common shapes people want to wrap text around. In SVG 1.1 (and all existing browsers), the “path” used by a layout must truly be a element: you can’t yet make text ride a or. Book Home Chapter 7 Summary All Online Extras Perfecting Paths for Using SVG with CSS3 and HTML5 - Supplementary Material Using SVG with CSS3 and HTML5 - Supplementary MaterialĮxample code and online extras for the O'Reilly Media book by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey.

Curving text in inkscape