SVG文本布局艺术

Preface

可缩放适量图形（SVG）由标记语言以及相关的样式规则构成，样式规则用来定义图像和图表。SVG是一种图形格式，而且对于大多数人来说，在考虑到SVG的作用的时候，文本不是想得到的第一件事。而，从一开始，SVG的一个关键功能就是它能把文本编码成机器可读格式的能力。因为SVG本身是基于文本的标记语言，SVG文件中的文本字符可以在任何文本编辑器中查看和编辑。

本书深入讲解SVG中的文本的用法。它不仅探讨了创造可能性，而且还探讨了潜在陷阱。它讲述了基础，但是也向你演示了你可以如何使用SVG以生成复杂的布局。而且，不幸的是，它还勾勒了很多SVG文本的浏览器编译器的矛盾和局限性的轮廓（在2015年中期，在编写本书的时候）。

这本书脱胎自另一个项目，一个介绍在web是使用SVG的项目。为了保持这本书的可控制的长度——保持它适合初学者——很多细节以及复杂之处被撇去了。但是那些细节和复杂之处合就了SVG作为一种图形格式的完整的、精彩的潜力。一旦你懂得了SVG的基础，你可以开始思考创建更错缩复杂的设计以及更有创造力的效果。

内容涵盖

如果你在阅读这段内容，希望你已经熟悉SVG的基础：关于如何把一个图形定义成一个形状的集合，如何使用图形作为独立的图像文件或者作为HTML网页中的一个元素标记。如果你熟悉CSS样式化HTML文本的基础，这也是有所帮助的，因为SVG文本建立在基本CSS样式规则之上。

本书从简短总结计算机如何显示文本内容开始，然后稳定地引导入SVG中允许你控制文本的外观的各种方法：

• 第一章 回顾了在字处理软件和网站中布局文本的基础，引入很多用于描述文本的技术术语。
• 第二章 引入了SVG<text>元素以及用于在图形中定义简单文本标签的基本元素属性，包括关于在一个可缩放的坐标系统中设置文本尺寸的特别主题。
• 第三章 简略覆盖了SVG的填充和描边属性，用于控制文本的可视外观。
• 第四章 步入很复杂的文本布局，使用格式化的诗作为示例。
• 第五章 探讨控制单个文本字符的定位和方向的能力。
• 第六章 引入文本锚属性，并讨论了它如何影响文本的对齐。
• 第七章 考虑多方向文本的特别主题，包括从右向左的水平文本和垂直文本。
• 第八章 引入属性，控制水平文本的垂直对齐以及垂直文本的水平对齐。
• 第九章 着眼于<textPath>元素，以及可以如何使用它，以创建弯曲的或者复杂的文本布局。
• 第十章 探讨字体和它们在SVG文本上的碰撞，包括@font-face规则的用法，它用来组成SVG在线图形。
• 第十一章 着眼于textLength元素属性以及font-size-adjust属性，它用于在你不能完全控制使用哪种字体时标准化文本布局；本章还包括了针对textLength的装饰用法。
• 第十二章 引入了SVG<foreignObject>元素，而且演示了它如何使用，以在一个SVG图像内部包含CSS格式的HTML文本

为了完成这本书，附录A提供了SVG文本元素以及它们的属性的一个快速引用，而附录B总结了相关的样式属性。

关于本书

Whether you’re casually flipping through the book, or reading it meticulously cover-to-cover, you can get more from it by understanding the following little extras used to provide additional information.

本书中的凡例

(O’Reilly boilerplate on code & term formatting)

关于示例

(Where to download sample files or view online, compatibility info) (O’Reilly boilerplate on copyright & permissions)

联系方式

(O’Reilly boilerplate)

鸣谢

(Thank you, thank you very much)