एसवीजी का उपयोग करना, क्या पथ के केंद्र में पाठ जोड़ना और क्षैतिज रूप से संरेखित करना संभव है?

Question

मैं पथ के केंद्र में पाठ जोड़ना चाहता हूं और इसे क्षैतिज रूप से संरेखित करना चाहता हूं, पथ के साथ संरेखित नहीं है।

मेरे पास केंद्र में पथ के साथ चल रहा निम्न पाठ है, लेकिन मैं इसे प्रदर्शित करना चाहता हूं ताकि यह क्षैतिज हो, इससे कोई फर्क नहीं पड़ता कि पथ किस कोण पर जा रहा है।

<text text-anchor="middle"> 
    <textPath xlink:href="#SomePath" startOffset="50%">Some Text</textPath> 
</text> 

Answer 1

अगर मैं सही ढंग से समझ आप प्रत्येक व्यक्ति के पत्र सीधे जा रहा है (अर्थात उत्तर ओर इशारा करते हुए), लेकिन मार्ग का अनुसरण करने के बाद कर रहे हैं। कुछ इस तरह:

वर्तमान SVG standard को देखते हुए यह नहीं लगता है संभव हो सकता है।

क्षैतिज पाठ लेआउट प्रवाह के लिए, किसी दिए गए ग्लिफ़ के लिए संदर्भ उन्मुखीकरण वेक्टर कि को प्रतिच्छेदन बिंदु पथ पर पर शुरू होता है जो ग्लिफ़ जुड़ा हुआ है और है जो दिशा 90 में अंक प्रतिच्छेदन बिंदु पर वक्र के कोण से डिग्री वामावर्त ।

छवि के ऊपर एसवीजी से उत्पन्न होता है, लेकिन (आप खामियों से देख सकते हैं के रूप में) घुमाने विशेषता लागू करके हासिल की थी प्रत्येक अक्षर के लिए अलग-अलग कर्निंग (रोटेशन) लगाने से:

<text id="text2897"> 
    <textPath xlink:href="#path2890" id="textPath3304"> 
     <tspan 
     rotate="69.238731 53.737518 40.30315 24.801943 358.96658 358.96658 4.1336575 357.93317 351.73267 351.73267 351.73267 348.63242 343.46533 343.46533 346.56558 347.599 347.599 347.599 347.599 347.599 347.599 346.56558 345.53217 344.49875 343.46533" 
     id="tspan2899"> 
     Some sample text for path 
     </tspan> 
    </textPath> 
    </text> 

Answer 2

आप स्क्रिप्ट में घूर्णन में आवश्यक समायोजन की गणना आसानी से कर सकते हैं:

var tp = document.getElementById("textpath"); 
var rotate = ""; 
for(var i = 0; i < tp.getNumberOfChars(); i++) 
{ 
    rotate += -tp.getRotationOfChar(i) + " "; 
} 
tp.setAttribute("rotate", rotate);