如何使用SVG Text

发布于 彦子

SVG文本是将图形和文本两者结合得最好的东西。它可以像其它图形元素一样渲染,这样你可以添加描边和填充,像图形、线条和箭头那样。它还可以被打包成XML字符数据,也就是说它是真的文本。

如何使用SVG Text

SVG文本是可访问的。你可以选中它,复制,在其它位置粘贴。它可以被屏幕阅读器读取,也可以在搜索引擎中进行搜索。你可以设置它在水平方向上排列,或者垂直都可以,还可以让文本沿着你创建的各种弯弯曲曲的路径排列。

距离我上次讲解SVG的内容已经过去了有一段时间了,希望没有让你等得太久(翻译同学最近也都不在线_(:зゝ∠)_)。接下来的几个星期,我们会接着讨论可缩放矢量图形,特别是SVG文本这块。

如果你对SVG这块还是新手,建议你先看看之前的文章,如何使用SVG。关于SVG系列的这些文章,可以点击这里看到全部哦~【持续更新中...】

字符、字形和字体

在我们开始之前,先看看这几个基础的定义。

**字符(Characters)**是你要展示的字母的数字表示形式。SVG文本是通过一些列的XML字符定义的,这也是它为什么可以被搜索和选中的原因。每个字符都由特定的unicode定义。

**字形(Glyphs)**是字符的可视化表示形式。例如,字母"f"可以以衬线和无衬线的形式展示,或在脚本中展示。它们都是相同的字符“f”,但是每个的字形都不一样。

**字体(Fonts)**是字形的集合。使用特定样式绘制的字形可以组合起来,然后整理成一种字体,例如Georgia字体和Helvetica字体。一种字体通常包含整个字母表所有字母的字形,可能还有一些代表连字符的符号。例如,可能会有单独的为"fi"这两个字母连在一起设计的字形。

除了字形的集合,字体还有一个字体表,其中包含展示集合中不同字形的必要信息。例如,展示一个字形的大小,以及定位等。字体表还会包含像font-weight(写CSS的同学都懂哒)这样的信息。

字形和字体表被称为字体数据。

EM框

今年我讨论到SVG坐标系的时候,我说到了canvas上不同的坐标系统,关于SVG绘制的位置,以及查看canvas的视窗。

对于字体有另一个特定的坐标系统。不同字体的几何特征,体现在基于EM box的坐标系统中。每个字形的盒子都是1em高和1em宽。盒子内就是字形的设计空间,这个坐标系统也被称为设计空间坐标系统。

该空间给出具体的坐标,通过把EM框以em为单位分解成一定数量的单元。这个数量是字体的特征之一,被包括在字体表的信息中。

(0,0)点通常位于box的左边缘,但通常不是左下角。你可以在这篇文章的开头的图像中看到示例。

罗马大写字母的底部通常是在y=0的位置。但有一些字母,如小写的gy,在设计空间中仍然有一部分在下行,所以其y坐标有一部分是负值。这导致y=0这个点变成了在设计空间的底部之上的某处(也就是说y=0不是最底部,它还有负值)。

SVG假设字体表将提供至少三种字体特征。

  • Ascent——从字体的(0,0)点到EM box顶部的距离
  • Descent——从字体的(0,0)点到EM box底部的距离
  • Baseline table(基线)——设计空间坐标系统中的基线的位置

也就是说,字体表至少要告诉SVG如何在设计空间内定位字形,虽然它还很可能包含一些像字体的weight之类的信息。

我目前还不想讲得太深入。EM box和字体表接下来还会出现很多次,在后面我讨论对齐和沿路径渲染SVG文本的时候。

在我们进入这两块内容之前,我们先讲讲如何创建SVG文本。

text元素

使用<text>元素创建SVG文本,定义一个由文本组成的图形元素。因为文本的渲染方式和其它SVG元素一样,所以我们可以像给矩形、圆、线条这些图形增加内容一样给SVG文本添加修饰。

你可以变换坐标空间中SVG文本。可以填充、添加描边,甚至在多个元素中重用文本。在开始之前,先从一个最简单的示例开始。

<svg>  
<text x="100" y="50">Some SVG Text</text>  
</svg>

我在<svg>标签中定义了一个<text>元素,然后添加了xy属性,设置了在视图中展示文本的位置。在<text>元素的开始和结束标签中,我添加了一些将要展示的文本。

Some SVG Text

这并不是什么非常赞的示例,但是我只是给你展示,要创建SVG中渲染的文本是非常容易滴。好了开始来创建实例吧~

<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">  
  <text x="0" y="0">Some SVG Text</text>  
</svg>

上面的例子,我给SVG元素添加了widthheight属性,设置了视窗的尺寸。我添加了一些内联样式,来展示视图的outline,这样我们可以看到我们的文本是否超出了视图的边界。我还把xy的值改为0,这样文本就会在视窗的原点位置开始渲染。

Some SVG Text

注意文本显示的位置。你可能以为它会出现在视窗的左边缘,但你估计没想到它居然跑到了视图上面。如果我没有把overflow属性设置为visible,我们可能甚至都看不见它。

因为这里的y表示的是文本的基线位置(前面提到y=0并不是在设计空间最底部的位置),基线包含在字体表中。

这还是上面的那个例子,添加了一些额外的文本,你可以看看字符是如何显示的。

Some SVG Text with descenders (gjpqy)

x为正值,会将文本移动到右边,y为正值会将它向下移。如果你想让别人看见你的文本,你需要设置y值为正。

关于xy,你还可以设置文本的起始位置。每个可以接受一列坐标值(用逗号或空格分隔)。列中的第一个坐标表示文本的第一个字符的位置,第二个坐标表示文本的第二个字符的位置,以此类推。

<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">  
 <text x="0,20,40,60,70" y="20">This is some SVG Text</text>  
</svg>

这里我给出了一列x坐标。第一个坐标(0)表示字符T的位置,第二个坐标(20)表示字符hx坐标,以此类推。一旦列的长度值都用完了,剩下的字符则按照原来的规则排列。

This is some SVG Text

它在xy两个方向上都可以这样来排列,如下面的例子,我在xy方向都给出了一列坐标值。

<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">  
  <text x="0,20,40,60,70" y="0,20,40,60,70">This is some SVG</text>  
</svg>
This is some SVG Text

我们先讲到这里,下周再继续这方面的讨论,我会讲一些额外的你可以给<text>元素添加的属性。

总结思考

我们现在只是刚开始讨论SVG文本,希望你学习后知道创建和定位SVG文本其实so easy。

<text>元素允许你定位所有的文本,它还允许你定位每个选中的字符。还有更多你可以做的内容,控制SVG文本展示的方式。

抱歉前面讲了相对无聊的字形、字体和设计坐标空间的内容,但是这对于理解后面的内容是非常有帮助的。我保证这个系列的大多数内容都会提供足够的示例,帮助你学习好SVG文本。

<text>元素还有很多要讲的内容,我们下周接着讲。我希望继续创建一些实例来帮助大家理解<text>元素可以添加的属性,包括你如何对文本进行拉伸和挤压,以使它适合你选中的空间。

本文根据@Steven Bradley的《How To Work With SVG Text》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://vanseodesign.com/web-design/how-to-work-with-svg-text/

彦子

在校学生,本科计算机专业。逗比一枚,热爱前端热爱生活,喜欢CSS喜欢JavaScript喜欢SVG,爱玩PS玩AI玩啊逗比的软件。努力向上,厚积薄发。

如需转载,烦请注明出处:https://www.fedev.cn/svg/how-to-work-with-svg-text.htmlNike MagistaX Proximo II TF white Fluorescent yellow women football shoes