W CSS/SVG, jak obrócić każdą literę słowa?

Question

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

 jest specjalny znak, który jest wyświetlany jako "strzałki".

Istnieje problem w demo powyżej: w kierunku strzałki w <textPath> jest prostopadle do <path>, gdy trzeba ustawić kierunek być takie same (równoległe), a ścieżki.

Dlatego muszę obracać o 90 stopni dla każdego znaku w tekście     (nie całe zdanie) ..

znalazłem this post o obracanie znaków, ale wygląda nie idealne, ponieważ musi „Encapsule każdy litera w elemencie z jQuery ". Może jest jakiś sposób, aby zrobić to łatwiej w SVG?

Czy ktoś ma pomysły na temat obracania każdej litery słowa w węźle <textPath>?

Answer 1

Wystarczy dodać do tego style="writing-mode: tb; glyph-orientation-vertical: 180;"text

Mam nadzieję, że to jest to, czego chciał:

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