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