Multiple lines of curved text in SVG - google-chrome

Question

Is there a way in SVG of drawing multiple lines of text within a single <text> element that follow the same path contour? Here is the closest I have been able to 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 output (in Chrome):
This is almost what I want. The problems:
I would like each line of text centered at the top of the arc, not to start the text there. It seems like the text-anchor attribute is being forgotten when the x value is specified in a tspan along a path. (This is not the case with straight text; the text-anchor attribute is remembered.)
Each successive line of text is crunched, as if following a concentric path. I would like each line of text to follow the same contour, as if the path were simply translated in the y direction by the height of the font.
I know I could just create three separate <path> elements and associate them with three separate <text> (or <textPath>) elements, but it would be really nice to keep all the text logically together using <tspan> elements for later applications.
Or is this supposed to work but there is a rendering bug in Chrome? (unlikely, IMO)

Answer 1

I can't tell if you want the text rendered on concentric circles or if you simply want it translated. If the former, then you may want to experiment with letter-spaccing attributes on your t-span elements. This will add tracking to your characters pushing them further apart. I tried the following, but alignment between lines is lost for some reason:
<?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>
However, if you want the latter (concentric circles), this appears to work in Safari and Chrome on the 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>
I know you were shooting for tspans only, but as you said, it seemed to reset the startOffset values.
HTH,
Kevin