In CSS/SVG, wie man jedes Zeichen eines Wortes dreht?

Question

Hier ist ein 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>

 ist ein Sonderzeichen, die als "Pfeil" angezeigt wird.

Es gibt ein Problem, das oben in der Demo ist: Die Richtung des Pfeils in den <textPath> ist senkrecht zum <path>, während ich seine Richtung festlegen muß die gleichen (parallel) als Weg zu sein.

Deshalb muss ich für jedes Zeichen in der     (nicht den ganzen Satz) Text 90 Grad drehen ..

ich this post über rotierende Zeichen gefunden, aber es sieht nicht ideal, weil es braucht, um „jede Encapsule Buchstabe in einem Element mit jQuery ". Vielleicht gibt es eine Möglichkeit, dies einfacher in SVG zu tun?

Hat jemand Ideen, wie man jedes Zeichen eines Wortes in <textPath> Knoten dreht?

Answer 1

Fügen Sie einfach diese style="writing-mode: tb; glyph-orientation-vertical: 180;"-text

Ich hoffe, das ist das, was man wollte:

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