SVG Circled Text auf TextPath (center align)

Question

Ich habe ein Problem mit eingekreistem Text im Zusammenhang mit SVG. Mein Ziel ist es, einen Weg zu schaffen, der es mir erlaubt, darauf zu schreiben, aber auch den Text zu zentrieren, der immer noch meinen Weg verfolgt - vom oberen Teil des Kreises aus.

Beispiel

That's what it looks like (Bild innen)

Problem

Derzeit textPath + Pfad Kombination Ich verwende Weg zu generieren und auf sie zu schreiben.

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

Ich habe auch versucht Raphael Bibliothek um es zu verwalten zu arbeiten, aber ernsthaft kann ich nicht tun, was ich will. Ist hier jemand, der es wirklich geschafft hat? Oder gibt es eine Möglichkeit, es so zu machen?

Answer 1

definieren Ihren Text Pfad wie die komplette obere Hemisphäre des elliptischen Bogens Sie zeichnen auf möchten:

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

und die startOffset Ihrer textPath-50% festgelegt. Beachten Sie, dass Ihre Svg-Datei nicht gut formatiert ist, da ihr die Namensraumdefinition für xlink fehlt. Folgendes ist ein funktionierendes eigenständiges Beispiel:

<?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: Kommentar an einer Lösung für das Gehen alle teh Weg um den Kreis: der Kern ist es, den Textpfad zu definieren, über den gesamten Umfang erstrecken, wie folgt aus:

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