#### 1、添加上下標 SVG或D3中，有時需要實現如下的效果：10^23，或需要下標，使用`baseline-shift`屬性即可實現。 `baseline-shift`屬性有兩個值： * sub： 實現下標； * super：實現上標。 ``` <text x=20 y=25 style="font-size: 12px;"> C<tspan style="baseline-shift: sub;">12</tspan> H<tspan style="baseline-shift: sub;">10</tspan> </text> <text x=20 y=55 style="font-size: 12px;"> 10*10<tspan style="baseline-shift: super;">12</tspan> </text> ``` #### 2、設定文本長度 使用`textLength`屬性設置文本長度。SVG會將文本調整到指定的長度，調整方式如下： * 只調整字符間距，保持字符本身大小不變，將`lengthAdjust`屬性值設置為`spacing`（默認值）； * 同時調整字符間距字符本身大小，將`lengthAdjust`屬性值設置為`spacingAndGlyphs`。 ``` <text x=20 y=30 textLength=200 lengthAdjust='spacing'>Test Words</text> <text x=20 y=30 textLength=200 lengthAdjust='spacingAndGlyphs'> Test Words </text> ``` #### 3、縱向文本 實現文本縱向顯示，一般有兩種方式： * 使用`transform`將文本旋轉90度； * 將`writing-mode`屬性值設置為`tb`。 如果希望文本垂直排列時仍然縱向顯示，則需要將`glyph-orientation-vertical`屬性設置為0。 ``` <text x=10 y=20 transform="rotate(90, 10, 20)">Rotated 90</text> <text x=50 y=20 style="writing-mode: tb;">Writing Mode</text> <text x=90 y=20 style="writing-mode: tb; glyph-orientation-vertical: 0;"> Vertical Zero </text> ```