二重回転を使用して、テキストを svg で垂直に表示しようとしています。各文字を 0 度回転させ、すべての文字を垂直に並べたいとします。元の svg は次のようになります。
<svg x="351" y="631" width="400" height="40" lines="1" type="textWrap" textWrap="false" name="VERTICAL TEXT TEST"><text x="0" y="40" font-family="Oswald Medium" letter-spacing="1.4" font-size="35px" characterWidth="0" textLength="none" lengthAdjust="spacingAndGlyphs" fill="black" text-anchor="start" >VERTICAL TEXT TEST</text></svg>
結果：
<svg x="351" y="631" width="400" height="40" lines="1" type="textWrap" textWrap="false" name="VERTICAL TEXT TEST"><text x="0" y="40" font-family="Oswald Medium" letter-spacing="1.4" font-size="35px" characterWidth="0" textLength="none" lengthAdjust="spacingAndGlyphs" fill="black" text-anchor="start">VERTICAL TEXT TEST</text></svg>
垂直に回転するには、次のアプローチを試しました。
1.svgの高さと幅の
交換 2.回転と変換機能を使用して90度で二重回転
そのためのコードは次のとおりです。
<svg x="351" y="631" width="40" height="400" lines="1" type="textWrap" textWrap="false" name="VERTICAL TEXT TEST"><text x="0" y="40" font-family="Oswald Medium" letter-spacing="1.4" font-size="35px" characterWidth="0" textLength="none" lengthAdjust="spacingAndGlyphs" fill="black" text-anchor="start" transform="rotate(90 0 40)" rotate="-90" >VERTICAL TEXT TEST</text></svg>
結果 ：
そのため、画像で明らかなように、文字間のスペースが適切に処理されていません。したがって、スペース自体が動的に処理されるように実装する方法。基本的に、私の要件は、誰かがボタンをクリックしてテキストを垂直に回転させた場合、元のスペースを水平にして上から下の方向に表示することです。