- SVG text视频
- Text示例
- Text定义
- 定位文本
- 文本锚点
- 文本描边和填充
- 字母间距和字距
- 单词间距
- 文本布局-无词包裹
- 旋转文本
- 垂直文本
- 文本方向
- 为文本添加样式
- 文本长度
- 相关SVG元素
SVG<text>
元素用来在SVG图片中绘制文本。
本篇教程的视频版如下:
<iframe width="560" height="315" src="https://www.youtube.com/embed/2l3Nm3PtKsk" frameborder="0" allowfullscreen=""></iframe>下面是一个简单的示例:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="40">Example SVG text 1</text>
</svg>
此例定义了一个位于x=10,y=40处的文本。文本内容是“Example SVG text 1”。
结果图片如下:
Example SVG text 1在深入了解SVG文本之前,最好先了解下面三个定义:
- 字形 字形是字母或符号的视觉表现。因为字母“a”有许多不同的视觉表现,所以我们可以使用多个不同的字形来绘制。
- 字体 字体是可以可视化一组字母和符号的字形集合。
- 字符 字符是字母或符号的数字(二进制)表示。一个字符可能需要1个或多个字节来表示。当计算机渲染字符时,它将这些字符映射到字体中的字形。
文本的位置由<text>
元素的x
和y
属性确定。属性x确定了在哪里定位文本的左侧边缘(文本的开始)。属性y确定了在哪里定位文本的底部(而不是顶部)。因此,文本的y坐标和线段、长方形或其它图形的y坐标不一样。下面这个例子展示了y坐标都为40的文本和线段:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="40">Example SVG text 1</text>
<line x1="10" y1="40" x2="150" y2="40" style="stroke: #000000"/>
</svg>
注意:文本的y位置是指文本的底部,而不是顶部。
文本锚点决定了文本的那个部分位于text
元素x
属性指定的x位置。其默认为文本的左侧边缘。也就是文本的开头。当然,你也可以使用文本的中间或右侧边缘——文本的结尾作为锚点。
你可以通过改变CSS属性text-anchor
设置文本的锚点。它有三个值:start
,middle
和end
。下面是一个展示text-anchor
三个不同文本锚点选项的SVG图:
垂直线展示了三个文本的X位置。所有三个文本的x="50"
。你可以看到三个文本如何以不同的方式定位锚点。
上述三个文本的SVG代码如下所示:
<text x="50" y="20"
style="text-anchor: start">
Start
</text>
<text x="50" y="40"
style="text-anchor: middle">
Middle
</text>
<text x="50" y="60"
style="text-anchor: end">
End
</text>
和其它图形一样,文本也可以设置描边和填充。如果你只指定描边,文本只会显示其轮廓。如果只指定填充,文本看起来像正常呈现。下面是三个展示stroke
和fill
组合的例子:
<text x="20" y="40" style="fill: #000000; stroke: none; font-size: 48px;">
Fill only
</text>
<text x="20" y="100" style="fill: none; stroke: #000000; font-size: 48px;">
Stroke only
</text>
<text x="20" y="150" style="fill: #999999; stroke: #000000; font-size: 48px;">
Fill and stroke
</text>
第一行文本只有填充。第二行只有描边。注意如何只绘制文本的轮廓。第三行包括描边和填充。注意如何将填充设置为灰色。
这里是上述图片的SVG代码:
<text x="20" y="40"
style="fill: #000000; stroke: none; font-size: 48px;">
Fill only
</text>
<text x="20" y="100"
style="fill: none; stroke: #000000; font-size: 48px;">
Stroke only
</text>
<text x="20" y="150"
style="fill: #999999; stroke: #000000; font-size: 48px;">
Fill and stroke
</text>
可以发现,为了更好的解释描边和填充的效果,我将font-size
设置为48px
。
当然,如果你想要更大的轮廓,也可以设置stroke-width
属性。下面的例子将stroke-width
设置为2:
<text x="20" y="40" style="fill: #999999;
stroke: #000000;
stroke-width: 2px;
font-size: 48px;
">
Stroke-width 2
</text>
你可以在SVG stroke章节阅读更多关于如何设置文本(以及任何其它SVG形状)的描边样式。
你也可以在SVG fill、SVG渐变、SVG填充图案和SVG遮罩章节阅读更多关于如何填充文本。
使用样式属性letter-spacing
和kerning
可以控制字母间距和字距(字形间距)。我不知道哪个最好用。下面是两个简单的例子:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="20" >Example SVG text</text>
<text x="20" y="40" style="kerning:2;">Example SVG text</text>
<text x="20" y="60" style="letter-spacing:2;">Example SVG text</text>
</svg>
结果图片如下:
Example SVG text Example SVG text Example SVG textletter-spacing
或kerning
中使用的数值将被添加到正常的字母间距和字距。如果你使用负值,间距会缩小。
你可以使用CSS属性word-spacing
设置文本的词距。单词间距是文本中单词之前的空格数。示例如下:
<text x="20" y="20">
Word spacing is normal
</text>
<text x="20" y="40"
style="word-spacing: 4;">
Word spacing is 4
</text>
<text x="20" y="60"
style="word-spacing: 8;">
Word spacing is 8
</text>
结果图片如下,注意:写作本文时,Firefox还不支持CSS属性word-spacing
。
word-spacing
属性指定的数值被添加到正常的词距中。如果你使用值normal
或省略word-spacing
属性,不会有任何效果。如果你指定了一个负数值,词距会缩小。
SVG没有自动换行。你不得不自己定位文本并且换行。你可以从<tspan>
元素的相对定位得到一些帮助。
你也可以沿着路径不布置文本,例如沿着圆形或样条。使用<textpath>
元素可以完成。
可以像旋转其它SVG形状一样,旋转SVG文本。使用SVG 变换,示例如下:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="40"
transform="rotate(30 20,40)"
style="stroke:none; fill:#000000;"
>Rotated SVG text</text>
</svg>
图片如下:
Rotated SVG text旋转由transform
属性实现,在SVG 变换会对其作解释。
通过旋转文本可以展示垂直的文本,但是有另外一个方法展示垂直的文本。可以将CSS属性writing-mode
设置为tb
(从上到下)。写作的同时,Firefox(22)不支持此特性。
下面是一个SVGwriting-mode
示例:
<text x="10" y="20" style="writing-mode: tb;">
Vertical
</text>
结果图片如下:
Vertical如果你想让字母不旋转,但是仍然垂直分布,你可以将CSS属性glyph-orientation-vertical
设置为0。此属性设置了字形的旋转,默认为90。
下面是一些glyph-orientation-vertical
的例子:
<text x="10" y="10" style="writing-mode: tb; glyph-orientation-vertical: 0;">
Vertical
</text>
<text x="110" y="10" style="writing-mode: tb; glyph-orientation-vertical: 90;">
Vertical
</text>
结果图片如下:
Vertical Vertical你也可以使用CSS属性letter-spacing
调整字母间距。下面两个例子带有不同letter-spacing
:
<text x="10" y="10" style="writing-mode: tb; glyph-orientation-vertical: 0;">
Vertical
</text>
<text x="50" y="10" style="writing-mode: tb; glyph-orientation-vertical: 0;
letter-spacing: -3;">
Vertical
</text>
下面是结果图片,可以发现,letter-spacing
设置为负值的文本在字形之间具有较小的垂直间距。
你可以使用CSS属性direction
设置文本渲染方向。direction
属性有两个值:ltr
和rtl
。这些值分别表示“从左到右”和“从右到左”。你也必须将CSS属性unicode-bidi
设置为bidi-override
。
下面是SVG文本direction
示例:
<text x="100" y="40" style="direction: rtl; unicode-bidi: bidi-override;">
Left to right
</text>
此例子将CSS属性direction
设置为rtl
(从右到左)。结果图片如下:
下面是为文本设置样式的特定于文本的CSS属性。请记住,你也可以为文本的stroke和fill添加样式,也可以用变换,图案和遮罩为文本添加样式。
你必须像下表一样,用小写属性名,否则SVG查看器会忽略它们。
属性 | 描述 |
---|---|
font-family | 使用的字体,如‘Arial’或‘Verdana’。 |
font-size | 字体的大小,如‘12px’或‘24px’。 |
kerning | 字母间距,如‘2’或‘3’(默认为1)。 |
letter-spacing | 字母间距,如‘2’或‘3’,与kerning相同。 |
word-spacing | 词距,如‘2’或‘3’。 |
text-decoration | 可以为none ,underline ,overline 和line-through 中任何一个。 |
stroke | 字体轮廓颜色。文本默认只有填充色没有描边。添加描边将会使字体变粗。 |
stroke-width | 字体轮廓颜色的宽度 |
fill | 字体的填充色 |
下面是一个使用了上述某些属性的例子:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="40"
style="font-family: Arial;
font-size : 34;
stroke : #000000;
fill : #00ff00;
"
>Styled SVG text</text>
</svg>
<text x="20" y="40" style="font-family: Arial;
font-size : 34;
stroke : #000000;
fill : #00ff00;
">Styled SVG text</text>
你可以使用<text>
元素的textLength
属性设置文本的长度。然后通过调整字符间距和字形的大小,使文本的长度适应指定大小。使用lengthAdjust
属性,你可以指定是否应该调整字母间距和字形大小。
下面是三个使用了SVGtextLength
和lengthAdjust
的例子:
<text x="5" y="20" textLength="140" lengthAdjust="spacing">
A long, long, long text.
</text>
<text x="5" y="40" textLength="200" lengthAdjust="spacing">
A long, long, long text.
</text>
<text x="5" y="60" textLength="200" lengthAdjust="spacingAndGlyphs">
A long, long, long text.
</text>
这是最终图像,注意最后两个文本上不同类型的间距。
A long, long, long text. A long, long, long text. A long, long, long text.写作本文时,Firefox还不支持这些属性。
以下SVG元素与<text>
元素相关,这意味着它们也可以和文本一起使用(点击元素名称了解更多):