SVG <textPath>
SVG Text - <textPath>
The <textPath> element is used to render
a text along the shape of a path.
The <textPath> element has six basic attributes:
| Attribute | Description |
|---|---|
| href | The URL to the path to render the text |
| lengthAdjust | How to compress or stretch the text to fit the width defined by the textLength attribute. Can be spacing|spacingAndGlyphs. Default is spacing |
| method | How to render the glyphs along the path. Can be align|stretch. Default is align |
| spacing | The space between glyphs. Can be auto|exact. Default is exact |
| startOffset | How far the beginning of the text should be offset from the beginning of the path. Can be a length, percentage or a number |
| textLength | The width of the text along the path. Can be a length, percentage or a number. Default is auto |
Text Along a Path
Use of the <textPath> element inside a <text>
element:
Here is the SVG code:
Example
<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
<path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2"
fill="none"/>
<text style="fill:red;font-size:25px;">
<textPath href="#lineAC" startOffset="80">I love SVG! I love SVG!</textPath>
</text>
</svg>
Try it Yourself »
Text Along a Path 2
Here we use the textLength attribute
to define the width of the text to 100% of the path:
Here is the SVG code:
Example
<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
<path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2"
fill="none"/>
<text style="fill:red;font-size:25px;">
<textPath href="#lineAC" textLength="100%" startOffset="20">I love SVG! I love SVG!</textPath>
</text>
</svg>
Try it Yourself »
