SVG Cerchia testo su textPath (allineato al centro)

Question

Ho riscontrato un problema con il testo cerchiato relativo a SVG. Il mio obiettivo è creare un percorso che mi permetta di scrivere su di esso, ma anche centrare il testo, continuando a seguire il mio percorso - dalla parte superiore del cerchio.

Esempio

That's what it looks like (immagine all'interno)

Problema

Attualmente sto usando textPath + combinazione percorso per generare percorso e scrivere su di esso.

<svg> 
<defs> 
<path id="textPath" d="M 200 175 A 25 25 0 0 0 182.322 217.678" /> 
</defs> 
<text x="25" y="0"><textPath xlink:href="#textPath" startOffset="0" >here goes my text</textPath></text> 
</svg> 

Ho anche provato la libreria di Raffaello per gestirlo, ma seriamente non posso fare quello che voglio. C'è qualcuno che è riuscito a farlo funzionare? O c'è un modo per farlo?

Answer 1

definire il vostro percorso di testo come l'emisfero superiore completo dell'arco ellittica che si desidera attingere:

<path id="textPath" d="M 250 500 A 250,150 0 1 1 750,500" /> 

e impostare il startOffset del textPath-50%. si noti che il file SVG non è ben formato in quanto manca la definizione dello spazio dei nomi per xlink. il seguente è un esempio standalone di lavoro:

<?xml version="1.0" encoding="utf-8"?> 
<!-- SO: http://stackoverflow.com/questions/15495978/svg-circled-text-on-textpath-center-align --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xhtml="http://www.w3.org/1999/xhtml" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.1" 
    width="20cm" height="20cm" 
    viewBox="0 0 1000 1000" 
    preserveAspectRatio="xMinYMin" 
    style="background-color:white; border: solid 1px black;" 
> 
<defs> 
<path id="textPath" d="M 250 500 A 250,150 0 1 1 750,500"/> 
</defs> 
<text x="0" y="0" text-anchor="middle" style="font-size:30pt;"><textPath xlink:href="#textPath" startOffset="50%" >here goes my text</textPath></text> 
</svg> 

re: commento su una soluzione per andare tutti teh intorno al cerchio: il succo è di definire il tracciato testo per estendersi lungo l'intera circonferenza, così:

<?xml version="1.0" encoding="utf-8"?> 
<!-- SO: http://stackoverflow.com/questions/15495978/svg-circled-text-on-textpath-center-align --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xhtml="http://www.w3.org/1999/xhtml" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.1" 
    width="20cm" height="20cm" 
    viewBox="0 0 1000 1000" 
    preserveAspectRatio="xMinYMin" 
    style="background-color:white; border: solid 1px black;" 
> 
<defs> 
<path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001"/> 
</defs> 
<text x="0" y="0" text-anchor="middle" style="font-size:30pt;"><textPath xlink:href="#textPath" startOffset="50%" >this is a merry-go-round of all my text wrapped around a circle, a vbery big one</textPath></text> 
</svg>