SVG实战开发学习（七）——文字与声音
【文字：<text>元素】
基本属性
x:文字左下角的X坐标，默认测量单位是当前用户坐标系单位，默认值是0.
y：文字左下角的Y坐标.
【<text>中嵌套<tspan>元素】
通过该元素就可以对同一个<text>元素内的文字位置、样式等属性进行单独或者部分设置，而不用再增加<text>元素。
基本属性：
x：逐个定义文字左下角的X绝对坐标。"+"号表示这是一个列表值（下同），列表值可以用逗号或者空格进行分割。如果是列表值则表示是每一个该元素内的文字的X坐标。如果定义的坐标值数量大于元素内的文字数量，多余的坐标值无效；反之，如果文字数量大于坐标值数量，则剩余文字的位置由父元素<text>定义的坐标值来确定。
y：逐个定义左下角的Y绝对坐标，含义同上述的X属性。
dx：逐个定义文字左下角的X相对坐标，相对于前一个字符的X坐标，默认值为0，如果是列表值，则分别定义了每一个该元素内的文字的X轴上的增量值。如果是第一个字符，那么就参照<text>元素定义的文字位置。
dy：文字左下角的Y相对坐标，含义同上述的的dx属性。
rotate：逐个定义以文字左下角为圆心进行的整体逆时针旋转的角度，默认值为0，也就是文字不旋转。如果是列表值，则分别定义了每一个该元素内的文字的旋转角度。
实例代码如下：
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="100" y="100" style="font-size:20">
<tspan style="font-size:30">W</tspan>
<tspan dx="5,5,5,5,5,5" dy="-5,-5,-5,-5,-5,-5">elcome</tspan>
<tspan x="230" y="80" dy="5,5,5,5,5,5">to SVG</tspan>
<tspan x="300" y="80"> world!</tspan>
</text>
</svg>
【文字效果】
1、文字装饰——text-decoration属性
文字装饰是通过设置text-decoration属性的值来实现的，该属性的参数值有：删除线"line-through"、下划线"underline"、上划线" overline "、闪烁"blink"。
2、文字彩色描边
该效果并没有使用特殊的属性，认识通过组合使用先前我们都已经熟悉的" stroke "、"stroke-width"来实现的。
如下实例：
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="100" y="100" style="font-size:86" fill="red" stroke="black" stroke-width="4">
SVG
</text>
</svg>
3、文字阴影
在SVG中，实现文字的阴影效果有两种办法，一种是采用滤镜的方法，这个方法将在第11章中介绍，另外一种方法就是采用下文的方法，使用两个<text>元素的错落叠加"曲线"来实现。
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="100" y="100" style="font-size:86" fill="red" stroke="black" stroke-width="1">
shadow
</text>
<text x="109" y="109" style="font-size:86" fill="red" stroke="yellow" stroke-width="1">
shadow
</text>
</svg>
4、文字透明
使用<text>元素中的"opacity"属性可以设置文字的透明效果，取值从0~1，代表着从透明(0%)到不透明( 100% ).
5、沿着路径变化的文字
SVG中提供了<textPath>元素来产生文字沿着某条事先定义好的曲线路径排列的效果。
见如下实例：
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="pathPreDef"
d="M 151 202 C 152.1667 195.3333 151.1667 171.8333 158 162 C 164.8333 152.1667 177.3333 145 192 143 C 206.6667 141 234.3333 139.8333 246 150 C 257.6667 160.1667 257.1667 185.3333 262 204 C 266.8333 222.6667 263.1667 246.1667 275 262 C 286.8333 277.8333 316.5 295.6667 333 299 C 349.5 302.3333 364.6667 292.6667 374 282 C 383.3333 271.3333 386.5 242.8333 389 235 "/>
</defs>
<text x="100" y="100" fill="blue"
stroke="blue" stroke-width="2"
font-size="24">
<textPath xlink:href="#pathPreDef">Fly text with my heart , Miss you...</textPath>
</text>
</svg>
以上所示
【汉字编码与中文显示】
中文要在SVG中正确显示，需要保证两个最基本的条件：
1、SVG文件使用UTF-8编码，而不是GB2312编码或者一些不支持汉字的编码或者一些不支持汉字的编码。
2、必须设置字体为中文字体
【声音：<a:audio>元素】
