Trong CSS/SVG, cách xoay từng ký tự của một từ?

Question

Đây là một 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>

 là một nhân vật đặc biệt mà được hiển thị như một "mũi tên".

Có một vấn đề trong bản demo trên: Các hướng mũi tên trong <textPath> là vuông góc đến <path>, trong khi tôi cần phải đặt hướng của nó là giống nhau (song song) như con đường.

Vì vậy, tôi cần phải xoay 90 độ cho mỗi nhân vật trong văn bản     (không phải toàn bộ câu) ..

tôi thấy this post về quay nhân vật, nhưng có vẻ không lý tưởng vì nó cần phải "Encapsule mỗi trong một yếu tố với jQuery ". Có lẽ có một cách để làm điều này dễ dàng hơn trong SVG?

Có ai có ý tưởng về cách xoay từng ký tự của một từ trong nút <textPath> không?

Answer 1

Chỉ cần thêm này style="writing-mode: tb; glyph-orientation-vertical: 180;"-text

Tôi hy vọng điều này là những gì bạn muốn:

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