Geek Answers Handbook

A few lines of curved text in SVG

Is there a way in SVG to draw multiple lines of text inside a single element <text>that follows a single path outline? Here is the closest I could get:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/>
    </defs>
    <use xlink:href="#text_0_path" stroke="blue" fill="none"/>
    <text font-family="Arial" font-size="18px" text-anchor="middle">
        <textPath xlink:href="#text_0_path" startOffset="50%">
            <!-- 157.075 is the center of the length of an arc of radius 100 -->
            <tspan x="157.075">Here is a line</tspan>
            <tspan x="157.075" dy="20">Here is a line</tspan>
            <tspan x="157.075" dy="20">Here is a line</tspan>
        </textPath>
    </text>
</svg>

Here is the result (in Chrome):

Curved text

This is almost what I want. Problems:

  • I would like each line of text to be centered on the top of the arc so as not to start the text there. It looks like the attribute is text-anchorforgotten when the value is xspecified in tspanalong the path. (This does not apply to plain text, the attribute is text-anchorremembered.)
  • , . , , y .

, <path> <text> ( <textPath>), , <tspan> .

, Chrome ? (, )

+5
1

, , , . , t-span. , . , - :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/>
    </defs>
    <use xlink:href="#text_0_path" stroke="blue" fill="none"/>
    <text font-family="Arial" font-size="18px" text-anchor="middle">
        <textPath xlink:href="#text_0_path" startOffset="50%">
            <!-- 157.075 is the center of the length of an arc of radius 100 -->
            <tspan x="157.075">Here is a line</tspan>
            <tspan x="157.075" dy="20" letter-spacing="2">Here is a line</tspan>
            <tspan x="157.075" dy="20" letter-spacing="4">Here is a line</tspan>
        </textPath>
    </text>
</svg>

, ( ), Safari Chrome Mac:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/>
    </defs>
    <use xlink:href="#text_0_path" stroke="blue" fill="none"/>
    <g font-family="Arial" font-size="18px">
        <text text-anchor="middle">
            <textPath xlink:href="#text_0_path" startOffset="50%">Here is a line</textPath>
        </text>
        <text text-anchor="middle" transform="translate(0, 20)">
            <textPath xlink:href="#text_0_path" startOffset="50%">Here is a line</textPath>
        </text>
        <text text-anchor="middle" transform="translate(0, 40)">
            <textPath xlink:href="#text_0_path" startOffset="50%">Here is a line</textPath>
        </text>
    </g>
</svg>

, tspans, , , , reset startOffset.

,

+3

More articles:


All Articles