सीएसएस/एसवीजी में, किसी शब्द के प्रत्येक अक्षर को घुमाने के लिए कैसे?

Question

यहाँ एक Jsfiddle demo

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
     <path id="MyPath" d="M 100 200 
 
      C 200 100 300 0 400 100 
 
      C 500 200 600 300 700 200 
 
      C 800 100 900 100 900 100" /> 
 
    </defs> 
 
    <use xlink:href="#MyPath" fill="none" stroke="red" /> 
 
    <text class="material-icons"> 
 
     <textPath xlink:href="#MyPath">&#xe55d; &#xe55d; &#xe55d; &#xe55d;</textPath> 
 
    </text> 
 
    <!-- Show outline of the viewport using 'rect' element --> 
 
    <rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" /> 
 
</svg>

 विशेष वर्ण है जो एक "तीर" के रूप में प्रदर्शित किया जाता है है।

ऊपर डेमो में कोई समस्या है: जब मैं एक ही (समानांतर में) मार्ग के रूप में होने के लिए अपनी दिशा निर्धारित करने की आवश्यकता <textPath> में तीर की दिशा, <path> को लंबवत होती है।

इसलिए, मैं पाठ     (नहीं पूरे वाक्य) में हर किरदार के लिए 90 डिग्री बारी बारी से करने की जरूरत है ..

मैं पात्रों घूर्णन के बारे में this post पाया है, लेकिन क्योंकि यह "प्रत्येक Encapsule करने की जरूरत है यह आदर्श नहीं लग रहा है jQuery के साथ एक तत्व में पत्र "। शायद एसवीजी में ऐसा करने का कोई तरीका है?

क्या किसी के पास <textPath> नोड में किसी शब्द के प्रत्येक वर्ण को घुमाने के बारे में विचार हैं?

Answer 1

बस जोड़ने के इस style="writing-mode: tb; glyph-orientation-vertical: 180;"text को

मुझे आशा है कि यह आप क्या चाहता है:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
     <path id="MyPath" d="M 100 200 
 
      C 200 100 300 0 400 100 
 
      C 500 200 600 300 700 200 
 
      C 800 100 900 100 900 100" /> 
 
    </defs> 
 
    <use xlink:href="#MyPath" fill="none" stroke="red" /> 
 
    <text class="material-icons" style="writing-mode: tb; glyph-orientation-vertical: 180;"> 
 
     <textPath xlink:href="#MyPath">&#xe55d; &#xe55d; &#xe55d; &#xe55d;</textPath> 
 
    </text> 
 
    <!-- Show outline of the viewport using 'rect' element --> 
 
    <rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" /> 
 
</svg>