1、插入文本并设置对其方式
<svg id="svg" xmlns="http://www.w3.org/2000/svg"
width="500px" height="500px" viewBox="0 0 500 500">
<g style="font-size:14pt;">
<path d="M 100 10 100 100" style="stroke:gray;fill:none;"/>
<text x="100" y="30" style="text-anchor:start">Start</text>
<text x="100" y="60" style="text-anchor:middle">Middle</text>
<text x="100" y="90" style="text-anchor:end">End</text>
</g>
</svg>
2、文本相关属性的使用
<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
<!-- 使用tspan标签 -->
<text x="10" y="30" style="font-size:12pt;">
Switch among
<tspan style="font-style:italic">italic</tspan>,normal,
and <tspan style="font-weight:bold">bold</tspan> text.
</text>
<!-- 使用dy、dx标签 -->
<text x="10" y="50" style="font-size:12pt;">
F<tspan dy="4">a</tspan>
<tspan dy="8">l</tspan>
<tspan dy="12">l</tspan>
</text>
<!-- 在<tspan>中为dx、dy、rotate设置多个值 -->
<text x="10" y="100" style="font-size:12pt;">
It's
<tspan dx="0 4 -3 5 -4 6" dy="0 -3 7 3 -2 -8" rotate="5 10 -5 -20 0 15">shaken</tspan>
,not stirred.
</text>
<!-- baseline-shift的使用 -->
<text x="10" y="150" style="font-size:12pt;">
C<tspan style="baseline-shift:sub;font-size:8pt;">12</tspan>
H<tspan style="baseline-shift:sub;font-size:8pt;">22</tspan>
O<tspan style="baseline-shift:sub;font-size:8pt;">11</tspan>
(sugar)
</text>
<text x="10" y="200" style="font-size:12pt;">
6.02 * 10<tspan baseline-shift="super" style="font-size:8pt;">23</tspan>
(Avogadro's number)
</text>
</svg>
3、设置文本长度
<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
<g style="font-size:14pt;">
<path d="M 20 10 20 70 M 220 10 220 70" style="stroke:gray;"/>
<!-- spacing只调整字符间距,spacingAndGlyphs同时调整字符间距和字符本身的大小 -->
<text x="20" y="30" textLength="200" lengthAdjust="spacing">Two words</text>
<text x="20" y="60" textLength="200" lengthAdjust="spacingAndGlyphs">Two words</text>
<text x="20" y="90">
Two words
<tspan style="font-size:10pt;">(normal length)</tspan>
</text>
<path d="M 20 100 20 170 M 100 100 100 170" style="stroke:gray;"/>
<text x="20" y="120" textLength="80" lengthAdjust="spacing">Two words</text>
<text x="20" y="160" textLength="80" lengthAdjust="spacingAndGlyphs">Two words</text>
</g>
</svg>
4、纵向文本
<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
<text x="10" y="20" transform="rotate(90,10,20)">rotated90</text>
<text x="50" y="20" style="writing-mode:tb;">Writing Mode tb</text>
<text x="90" y="20" style="writing-mode:tb;text-orientation:upright;letter-spacing:-2">Vertical zero</text>
</svg>
5、文本路径
<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
<defs>
<path id="curvepath" d="M 30 40 C 50 10 70 10 120 40 S 150 0 200 40" style="stroke:gray;fill:none;" />
<path id="round-corner" d="M 250 30 L 300 30 A 30 30 0 0 1 330 60 L 330 110" style="stroke:gray;fill:none;" />
<path id="sharp-corner" d="M 30 110 100 110 100 160" style="stroke:gray;fill:none;" />
<path id="discontinuous" d="M 150 110 A 40 30 0 1 0 230 110 M 250 110 270 140" style="stroke:gray;fill:none;" />
</defs>
<g style="font-family:'liberation Sans';font-size:10pt;">
<use xlink:href="#curvepath" />
<text>
<textpath xlink:href="#curvepath" startOffset="25%">
Going round the bend
</textpath>
</text>
<use xlink:href="#round-corner" />
<text style="text-anchor:middle">
<textpath xlink:href="#round-corner" startOffset="50%">
Going round
</textpath>
</text>
<use xlink:href="#sharp-corner" />
<text>
<textpath xlink:href="#sharp-corner">
Going round the bend
</textpath>
</text>
<use xlink:href="#discontinuous" />
<text>
<textpath xlink:href="#discontinuous">
Going round the bend
</textpath>
</text>
</g>
</svg>