Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

SVG Code to Place Text on a Curved Path

Text is on a path
<svg width="400" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <path id="textPath" stroke="black" fill="transparent"
   d="M 50 200 
   C 80 100 100 0 200 100
   C 200 100 300 200 300 200" />

   <text font-family="Verdana" font-size="42.5" fill="blue">
   <textPath href="#textPath">
      Text is on a path
   </textPath>
   </text>
</svg>

One interesting thing you can do with SVG is to place text on a curved path. The first thing you have to do is code the path, giving the path tag an id attribute. The syntax for a path is shown below.

<path d="M x y C x1 y1 x2 y2 x y ...>

AttributeDescription
dpath data, indicates data for a path follows
Mmoveto - is followed by the coordinates of the location to begin drawing the path
Ccurveto - data for a path segment draws a Bezier curve from the current coordinate point
x1 y1the control point at the beginning of the curve
x2 y2the control point at the end of the curve
x ythe new current point

A path can have many segments as desired, each in the form of C x1 y1 x2 y2 x y.

The second thing you need to do is code the text. As you see in the above code this is simply done using the <text> tag, and adding font-family, font-size, and fill attributes if desired. The important part is to place the text within <textPath> </textPath> tags, adding the href attribute with the path's id to point to the path the text should follow.

More Graphics Design Tips:
• Image Processing Filters - How to Sharpen a Photograph
• Find Free Stock Photos You'll Actually Want to Use For Your Website or Blog
• How to Create Radial Gradients in Inkscape
• SVG Code for Outlined Letters Text
• Inkscape Circles, Ellipses, and Arcs Drawing Tutorial
• How to De-haze a Photo with GIMP
• Image Scanning - Confused About DPI?
• How to Trace an Image Using Inkscape
• SVG Basic Shapes Tutorials
• Coding Color for the Web

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268