टेक्स्टपाथ (केंद्र संरेखण) पर एसवीजी सर्कल टेक्स्ट

Question

मुझे एसवीजी से संबंधित चक्र से संबंधित समस्या मिली। मेरा लक्ष्य पथ बनाना है जो मुझे उस पर लिखने की अनुमति देगा, लेकिन पाठ को भी केंद्रित करेगा, फिर भी मेरे पथ के साथ ट्रैक रखेगा - सर्कल के शीर्ष भाग से।

उदाहरण

That's what it looks like (छवि के अंदर)

समस्या

वर्तमान में मैं textPath + पथ संयोजन का उपयोग कर रहा पथ पैदा करते हैं और उस पर लिखने के लिए।

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

मैंने राफेल लाइब्रेरी को इसे प्रबंधित करने के लिए भी कोशिश की, लेकिन गंभीरता से मैं जो भी चाहता हूं वह नहीं कर सकता। क्या कोई ऐसा व्यक्ति है जो वास्तव में इसे काम करने में कामयाब रहा? या ऐसा करने का कोई तरीका है?

Answer 1

अंडाकार चाप आप पर चित्रकारी करना चाहते की पूरी ऊपरी गोलार्द्ध के रूप में अपने पाठ पथ को परिभाषित:

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

और अपने textPath से 50% की startOffset निर्धारित किया है। ध्यान दें कि आपकी svg फ़ाइल अच्छी तरह से गठित नहीं है क्योंकि इसमें xlink के लिए नेमस्पेस परिभाषा की कमी है।

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

पुन:: सार पूरे परिधि का विस्तार करने, इस तरह पाठ पथ को परिभाषित करने के लिए है: सर्कल के चारों ओर तेह सभी तरह जाने के लिए एक समाधान पर टिप्पणी

के बाद एक काम कर स्टैंडअलोन उदाहरण है

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