毫无疑问，文本也是svg中组成的重要部分，在svg中，用<text>元素来创建文本，文本的使用格式如下：
<text x="20" y="30" style="font-family:'微软雅黑'; font-size:25px;">这是一个text元素</text>
其中的x和y属性默认情况下是第一个字符左下角的位置坐标，style中可以是CSS的文字相关属性，比如：font-family，font-size，font-weight，font-style，text-decoration，word-spacing，letter-spacing等，示例如下：
<!DOCTYPE html> <html> <head> <title>SVG</title> </head> <body> <svg width="300" height="300" style="border:1px solid #000"> <path d="M 10,30 L 250,30" stroke="black"></path> <path d="M 20,10 L 20,150" stroke="black"></path> <text x="20" y="30" style="font-family:'微软雅黑'; font-size:20px;">这是一个text元素</text> </body> </html>
效果如下：
我们大多数的时候可能并不仅仅想让文本左对齐，而是居中对齐或者是右对齐，<text>元素的text-anchor属性来指定文本的对齐方式，取值有start，middle，end三种，分别对应左对齐，中间对齐，右对齐。当设置text-anchor属性的值为start时（默认），<text>元素的x和y属性表示最左边文字左下角的坐标；设置为middle时，<text>元素的x和y属性表示中间文字中间位置下边的坐标；设置为end时，<text>元素的x和y属性表示最右边文字右下角的坐标：示例如下：
<!DOCTYPE html> <html> <head> <title>SVG</title> </head> <body> <svg width="300" height="300" style="border:1px solid #000"> <path d="M 150,10 L 150,200" stroke="black"></path> <text x="150" y="60" text-anchor="end" style="font-family:'微软雅黑'; font-size:20px;">这是一个text元素</text> <text x="150" y="100" style="font-family:'微软雅黑'; font-size:20px;">这是一个text元素</text> <text x="150" y="140" text-anchor="middle" style="font-family:'微软雅黑'; font-size:20px;">这是一个text元素</text> </svg> </body> </html>
效果如下：
和html中<p>元素和<span>元素类似的是svg中<text>元素还可以嵌套<tspan>元素，<tspan>元素的作用类似于html中的<span>元素，但与<span>元素不同的是，<tspan>元素有x，y，dx，dy，rotate几个属性：示例如下：
<!DOCTYPE html> <html> <head> <title>SVG</title> </head> <body> <svg width="400" height="300" style="border:1px solid #000"> <text x="20" y="40" stroke="none" fill="black"> <tspan>网络教育是当今国际国内教育发展的热点，</tspan> <tspan x="20" y="65">也是现代教育技术的主流发展方向之一。</tspan> <tspan x="20" y="90">在传统的教学中，大多数情况下，知识是老师灌输的，</tspan> <tspan x="20" y="115">学生只是被动接收。而在网络教育中，</tspan> <tspan x="20" y="140">学习采用互动方式，从某种程度上说，</tspan> <tspan x="20" y="165">学生既是一个接收者，也是一个参与教育的主体。</tspan> <tspan x="20" y="190">这种交互式的教育，更有助于学生知识的获得、能力的培养，有助于更主动地去思考。</tspan> </text> </svg> </body> </html>
效果：
<text>，<tspan>元素中的文字不会自动换行（现象如上图最后一行）。<tspan>中的x和y属性与<text>元素的x，y属性作用相同，dx和dy属性是相对距离，当<tspan>元素指定dx属性时，相当于将<tspan>元素向左（dx值为负数）或者向右（dx值为正数）偏移一定的距离；指定dy属性时，相当于将<span>元素向上（dy值为负数）或者向下（dy值为正数）偏移一定距离。而rotate就是旋转一定角度了。
示例：
<!DOCTYPE html> <html> <head> <title>SVG</title> </head> <body> <svg width="800" height="180" style="border:1px solid #000"> <text x="20" y="20" stroke="none" fill="black"> 网络教育是当今国际国内教育发展的热点，也是现代教育技术的主流发展方向之一。在传统的教学中， <tspan x="20" y="45" rotate="12 34 45 12 34 56 90 190 349 120 128"> 大多数情况下，知识是老师灌输的，学生只是被动接收。而在网络教育中，学习采用互动方式， </tspan> <tspan x="20" y="70" dy="1 3 5 6 7 8 2 2 5 2 6 "> 从某种程度上说，学生既是一个接收者，也是一个参与教育的主体。这种交互式的教育，更有助于学 </tspan> <tspan x="20" y="145" dx="1 2 4 5 1 3 4 7 9 10"> 生知识的获得、能力的培养，有助于更主动地去思考。 </tspan> </text> </svg> </body> </html>
效果如下：
第一行是正常情况下的，没有任何属性的，第二行是添加了rotate属性的（值的单位是度），第三行是添加了dy属性的，第四行是添加了dx属性的，这些属性都可以指定多个值，之间用空格和逗号之间隔开，这些值会依次应用在字符上。
有时候我们可能会想让一段文字占用固定的长度，这时候我们可以用textLength属性和textAdjust属性来实现，textLength属性即为文字占用的长度，textAdjust用来指定调整字符大小的方式，指定为spacing（默认值）时是调整字符间空隙的大小，指定为spacingAndGlyphs是调整字符大小和字符间空隙的大小，示例：
<!DOCTYPE html> <html> <head> <title>SVG</title> </head> <body> <svg width="300" height="100" style="border:1px solid #000;"> <text x="10" y="10" stroke="none" textLength="200"> two words </text> <text x="10" y="30" stroke="none" textLength="200" lengthAdjust="spacingAndGlyphs"> two words </text> <text x="10" y="50" stroke="none" textLength="50"> two words </text> <text x="10" y="70" stroke="none" textLength="50" lengthAdjust="spacingAndGlyphs"> two words </text> </svg> </body> </html>
效果：
这样可能看不清，来张放大的
这就一目了然了吧O(∩_∩)O哈哈~
有时候我们并不想让文字横向排列，我们可能想让文字旋转一定的角度，甚至竖直排列，当然我们可以使用transform的rotate实现，但是让文字竖直排列还有一个方法，就是设置writing-mode属性为tb（top to bottom）,如果想让文本在竖直排列的时候，单个字符仍然横向显示，可以通过设置glyph-orientation-vertical的值为0实现，默认90。示例如下：
<!DOCTYPE html> <html> <head> <title>SVG</title> </head> <body> <svg width="300" height="300" style="border:1px solid #000"> <text x="10" y="10" writing-mode="tb"> 这是一段文本文字 </text> <text x="30" y="10" transform="rotate(90 30 10)"> 这是一段文本文字 </text> <text x="70" y="10" writing-mode="tb"> this is a paragraph </text> <text x="90" y="10" writing-mode="tb" glyph-orientation-vertical="0" > this is a paragraph </text> </svg> </body> </html>
效果如下：
但是最后一个有问题，我已经设置了glyph-orientation-vertical为0，但是字母并没有翻转过来，至于原因，我也不知道为什么╮(╯▽╰)╭╮(╯▽╰)╭
关于国际化的<switch>，用的不多，就不多说了，用的时候查一下就就行了(～￣▽￣)～
我想我不是个乖孩子，从小就不是，我爸妈在我小时候给我定了一堆规矩，不准动这个，不准玩这个，上学了老师说，上课不准睡觉不准吃东西不准大声说话云云~~~但是我从来就没当回事，也就当时听了一下，玩的时候早忘脑后了————————svg中的文本一直就是一条直线，你难道就不想破坏一下这个规矩吗（不知道你想不想，反正我是个从来不遵守规定的人(￣_,￣ )），svg中使用路径来给文本创建轨迹，使用的时候只需要在<text>元素中嵌套子元素<textPath>，并使用<textPath>元素的xlink:href属性引用声明好的路径就行，看示例：
<!DOCTYPE html> <html> <head> <title>SVG</title> </head> <body> <svg width="300" height="300" style="border:1px solid #000"> <defs> <path id="p1" class="st0" d="M30.6,115.9c22.8-15.2,40.6-10.7,41.1,24.9S0.2,229.6,46.4,261.1s58.4,31,89.3,7.6 S108.4,226,150,193.5s61.9,71.6,92.8,34.5s54.3-79.7,19.8-111.7s-55.8-53.3-100.5-45.7S98.2,59.5,88,37.2s-69-8.6-69-8.6"/> </defs> <use xlink:href="#p1" stroke="black" fill="none"></use> <text> <textPath xlink:href="#p1"> 这是一个测试的字符段，用来测试带有路径的文本,这行字仅仅是用来测试的，看一下就就行了，千万别仔细看，不过你已经看到这了，就看完吧，反正就要结束了 </textPath> </text> </svg> </body> </html>
效果：
上面个这个图片的代码中的路径是我用Adobe Illustrator生成的，我可不会傻到自己用代码敲这么一个路径出来(⊙ω⊙)