Varias líneas de texto curvo en SVG

Question

¿Hay alguna manera en SVG de dibujar varias líneas de texto dentro de un único elemento <text> que sigue el mismo contorno de ruta? Aquí es lo más cerca que he podido conseguir:

<?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> 

Aquí está la salida (en Chrome):

Esto es casi lo que quiero. Los problemas:

• Me gustaría que cada línea de texto se centrara en la parte superior del arco, no para comenzar el texto allí. Parece que el atributo text-anchor se está olvidando cuando el valor x se especifica en un tspan a lo largo de una ruta de acceso. (Esto es no la caja con texto recto; se recuerda el atributo text-anchor.)
• Cada línea de texto sucesiva es crujiente, como si siguiera una ruta concéntrica. Me gustaría que cada línea de texto siga el mismo contorno, como si la ruta se tradujera simplemente en la dirección y por la altura de la fuente.

sé que sólo podía crear tres <path> elementos separados y asociarlos con tres <text> (o) <textPath> elementos separados, pero sería muy bueno para mantener todo el texto lógicamente entre sí mediante <tspan> elementos para aplicaciones posteriores.

¿O es esto supuesto para funcionar, pero hay un error de representación en Chrome? (improbable, IMO)

Answer 1

No sé si desea que el texto se represente en círculos concéntricos o si simplemente lo quiere traducir. Si es el primero, entonces es posible que desee experimentar con los atributos de espaciado de letras en sus elementos t-span. Esto agregará seguimiento a tus personajes empujándolos más lejos. He intentado lo siguiente, pero la alineación entre líneas se pierde por alguna razón:

<?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> 

Sin embargo, si desea que los últimos (círculos concéntricos), esto parece funcionar en Safari y Chrome en 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> 

Sé que estaba grabando solo para tspans, pero como dijo, pareció restablecer los valores de startOffset.

HTH, Kevin