Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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:

I love SVG! I love SVG! Sorry, your browser does not support inline SVG.

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:

I love SVG! I love SVG! Sorry, your browser does not support inline SVG.

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 »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.