在svg中用使用
在svg中写下
在平坦的路上曲折前行
Example 1 Dome
<svg height="30" width="200"> <text x="0" y="15" fill="red">在平坦的路上曲折前行</text></svg>
在例子1中 x="0" y="15" 是文字定位坐标
可能你会有疑问，为什么文字没有距离上边是15呢？这里首先你需要了解个概念baseline 熟悉css的同学会眼熟 会用到 vertical-align: baseline; 但是什么是 baseline呢？
这不是我们的重点了解移步到《CSS Baseline: The Good, The Bad And The Ugly》 译文：《CSS基线之道》
在svg中xy 的坐标就是 基于baseline 如图：
所以就看不到预想的文字没有距上边15px。
你也可以把
Example 2 Dome
<svg height="90" width="200"> <text x="10" y="20" style="fill:red;">Several lines: <tspan x="10" y="45">First line.</tspan> <tspan x="10" y="70">Second line.</tspan> </text></svg>
如果没有设置tspan 的 x y 那么文本会类似 css 中行内展示
你可以把文字设置成链接
Example 3 Dome
<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://www.w3schools.com/svg/" target="_blank"> <text x="0" y="15" fill="red">I love SVG!</text> </a></svg>
这里注意下，按照html的习惯直接在a 标签里写文字是不可以的，文字不会显示，这里文字是个文本对象，你要设置这个对象的链接。
到现在svg中的文字标签能满足常规的需要，看似简单，其实不然??“大有可为”！～
比如让文字旋转下Example 4
Example 4 Dome
<svg height="60" width="200"> <text x="0" y="15" fill="red" transform="rotate(30 20,40)">在平坦的路上曲折前行</text></svg>
transform="rotate(30 20,40)" 表示在 （20.40）位置顺时针旋转30度
svg 中虽然没有提供排版的相关支持，但是你可以 通过 dx dy 来设置错落的文字
让我们感受下：
Example 5 Dome
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="300" viewBox="0,0,400,300"> <text x="10" y="20"> <tspan dx="0 5 10 15 20">12345</tspan> </text> <text x="10" y="65"> <tspan dy="0 5 10 15 20">12345</tspan> </text> <text x="10" y="150"> <tspan dx="0 5 10 15 20" dy="0 5 10 15 20">12345</tspan> </text> <text x="10" y="215"> <tspan dx="0 5 10 15 20" dy="0 5 10 15 20">我爱你中国</tspan> </text></svg>
rotate 文字的旋转属性，rotate可以是个数值列表分别作用于对应的字母，如下面例子
Example 6 Dome
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="300" viewBox="0,0,400,300"> <text x="10" y="20"> <tspan rotate="0 5 10 15 25">在平坦的路上曲折前行</tspan> </text></svg>
还是得把baseline拿出来，旋转的单位是度，因为我们的习惯是屏幕定位，所以旋转是沿着y轴顺时针旋转。旋转基于每个字母的基线和字母左边。在例子中，文字（字母）是多于rotate的，这时候按照rotate list 的最后一个规则定义多出的字母。
textLength不好理解，不是文字的长度的意思，指定文字以 textLength 的 SVG viewer去两端对齐排这些文字类似 css text-align:justify
Example 7 Dome
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="300" viewBox="0,0,400,300"> <text x="10" y="20"> <tspan textLength="400" >在平坦的路上曲折前行</tspan> </text></svg>
还有个属性配合textLength使用----lengthAdjust
lengthAdjust 有两个值spacing （默认）和 spacingAndGlyphs当设置成spacingAndGlyphs的时候，会拉伸字母，知道适合充满textLength 不太好理解，看下实例就懂了。
Example 7 Dome
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="300" viewBox="0,0,400,300"> <text x="0" y="20"> <tspan textLength="400" lengthAdjust="spacing" >在平坦的路上曲折前行</tspan> </text> <text x="0" y="80"> <tspan textLength="400" lengthAdjust="spacingAndGlyphs" >在平坦的路上曲折前行</tspan> </text></svg>
使用过Illustrator的朋友都知道，我们可以让文字跟随路径，做出各种形状的文字。我们需要用
Example 8 Dome
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="300" viewBox="0,0,400,300"> <defs> <path id="a1" d="M0 50 C150 150 100 -50 300 50" stroke="#000" fill="none"/> </defs> <text> <textPath xlink:href="#a1">在平坦的路上曲折前行</textPath> </text> <text dy="30"> <textPath startOffset="30%" xlink:href="#a1">在平坦的路上曲折前行</textPath> </text> </svg>
xlink:href 来指定
这里xlink:href 不但能指定路径，还能指定一段文字。如例子：
Example 9 Dome
