SVG HTML

Text Along a Path

This SVG example demonstrates how to display text along a path.

TextAlongAPath.svg

<svg width="450px" height="200px" viewBox="0 0 450 200" xmlns="http://www.w3.org/2000/svg">
  <path id="curve" d="M 50 10 A 175 175 0 1 0 400 10" fill="none"
    stroke="#FF0000" stroke-width="1"/>
  <text>
    <textPath href="#curve">
        In the beginning was the Word, and the Word was with God, and the Word was God.
    </textPath>
  </text>
</svg>
 

Output

In the beginning was the Word, and the Word was with God, and the Word was God.
 
 

© 2007–2024 XoaX.net LLC. All rights reserved.