作者：艾美利亚·拜拉梅·罗兹
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
深入理解SVG试读：
前言
本书深入讨论了 SVG 的一个特定的方面：绘画。这里的绘画使用的不是油墨或水彩，而是可被计算机转化为有色像素的图形指令。本书探讨了创建它的可能性以及潜在的风险。书中不仅描述了一些基础知识，还介绍了如何通过混合和搭配工具来生成复杂的效果。
本书起源于一个介绍如何在 Web 上使用 SVG 的项目。为了保证本书篇幅适中，并适合入门读者，许多细节和复杂的部分我们不再赘述。但这些细节和复杂内容会使作为图片格式的 SVG 更加丰富、美妙。掌握了 SVG 基础后，你就可以考虑去制作更加复杂的绘画和更加细致的效果。本书内容
如果你正在阅读本书，我们希望你已经熟悉了 SVG 的基础知识，例如如何把图形定义为一系列形状，如何将图形作为一个单独的图片文件或作为 HTML 页面中的标记来使用。如果你不确定是否已经准备好，第1章会带你回顾一些应该知道的基础概念。
本书的剩余部分着重讲解 SVG 颜色、图案以及渐变。● 第2章讨论了把 SVG 代码转换为可视图形的渲染模型，还介绍
了可以设置在形状和文本上以控制它们如何绘制在屏幕上的基础
属性。● 第3章着重讲解了颜色：它在自然界中是如何工作的，在计算机
中又是如何工作的，以及如何在 SVG 代码中指定颜色。● 第4章中讨论了透明度，更确切地说，是不透明度；还介绍了控
制图形不透明度的多种方法，以及它们是如何影响最终效果的。● 第5章中介绍了渲染服务的概念：定义其他 SVG 图形和文本如
何被绘制到屏幕上的复杂图形内容。这一章还介绍了纯色渲染服
务，你最初可能会觉得它用处不大，但实际上却很有用。● 第6章着眼于渐变，主要讲解了通过调整结点的位置和属性来创
建不同的颜色过渡效果。● 第7章探讨了如何控制线性渐变在要渲染的形状内移动。● 第8章介绍了重复线性渐变以及利用它们可以实现的一些效果，
同时还介绍了一些在 HTML 页面中使用渐变（以及其他渲染服
务）生成内联 SVG 图标的示例和小技巧。● 第9章着眼于径向渐变，包括重复径向渐变，最后还给出了一些
使用多个渐变来创建复杂效果的例子。● 第10章介绍了
图像或图形。● 第12章详细介绍了渲染服务是如何应用到文本上的。● 第13章讨论了使用渲染服务绘制描边区域而非填充区域时出现
的一些问题。● 第14章给出了一些给渲染服务添加动画的例子，还讨论了在
SVG 中可用的不同添加动画方法的优点与局限。
本书最后的两个附录提供了把理论用到实践中时会用到的基本语法，可供你快速参考。● 附录 A 重述了定义颜色的多种方法，包括所有预定义的颜色关
键词。● 附录 B 总结了所有的渲染服务元素、它们的属性，以及相关的
样式属性。关于本书
无论你是随便翻阅本书，还是从头到尾仔细阅读，理解如下用于提供额外信息的小指南，你可以获得更多知识。关于示例
SVG 图像可以使用许多不同类型的软件来展示和操作，且每个程序在 SVG 代码的解析上略有不同。尤其在图形文件分发在 Web 上时，这确实是个问题；你希望人们在另一端看到的内容与你期望的效果无限接近。
因此本书中的例子在桌面最新稳定版（2015年7月）的 Chrome、Firefox、Internet Explorer 以及 Safari 浏览器中都进行了测试。缺陷、漏洞以及浏览器的支持程度都在文本中有所注明。此外，还提到了微软 Edge 浏览器预期在支持程度上的更改。
几乎所有其他浏览器使用的都是某一主要开源渲染库的变体：Gecko（Firefox）、WebKit（Safari 以及 iOS 设备）或 Chromium/Blink（WebKit 的一个分支，主要为 Chrome 开发）。因此，你可以以主要浏览器的支持情况作为指南，但要注意的是并非所有软件都会同时更新。对于移动浏览器，即使某些功能在技术上是支持的，但会受到实际性能的限制。某些移动浏览器（例如 Opera Mini）会刻意限制它们支持的功能来提升性能。
SVG 还可以用在 Adobe Illustrator 和 Inkscape 等图形程序中。有很多工具，例如 Apache Batik 或 libRSVG，可以把 SVG 代码转换为其他矢量图形格式，比如 PDF 文档。这些工具都会有新的兼容性问题，这在本书中没有详细介绍。一定要小心地在所有需要使用的工具中测试！使用代码示例
补充材料（代码示例和图形）可以从以下网址在线获取。
下载地址：https://github.com/oreillymedia/SVG_Colors_Patterns_Gradients。
在线观看地址：http://oreillymedia.github.io/SVG_Colors_Patterns_Gradients/。
本书是要帮你完成工作的。一般情况下，如果书中提供了示例代码，你可以在你的程序或文档中使用，且不用联系我们获得许可，除非你大量复制我们的代码。例如，在你的程序中使用本书中的几个代码块不需要获得我们的许可。销售或分发 O'Reilly 图书中示例的 CD-ROM 需要获得许可。引用本书及引用示例代码来回答问题不需要获得我们的许可。将本书中大量示例代码合并到你的产品文档中时需要获得许可。
我们很希望但并不强制要求你在引用本书内容时加上引用说明。引用说明一般包括书名、作者、出版社和 ISBN。比如：“SVG Colors, Patterns & Gradients by Amelia Bellamy-Royds and Kurt Cagle (O'Reilly). Copyright 2016 Amelia Bellamy-Royds and Kurt Cagle, 978-1-4919-3374-9.”
如果你觉得对代码示例的使用不属于合理使用或超出了上述许可范围，请随时通过 permissions@oreilly.com 联系我们。排版约定
本书使用的排版约定如下。● 楷体
表示新术语。● 等宽字体（constant width）
表示程序片段，以及正文中出现的变量、函数名、数据库、数据
类型、环境变量、语句和关键字等。● 加粗等宽字体（constant width bold）
表示应该由用户输入的命令或其他文本。● 等宽斜体（Constant width italic）
表示应该由用户输入的值或根据上下文确定的值替换的文本。 该图标用于突出 SVG 中特别复杂的部分，或初看不太明显的简单的快捷方式。
该图标表示一般的注记和有趣的背景信息。
这样的警告信息将用于突出不同浏览器（或其他软件）之间，或 SVG 作为 XML 文件和在 HTML 页面中使用 SVG 之间的兼容性问题。
除此之外，如下样式将用于补充信息。简介本书中使用了两种类型的附注栏。“聚焦未来”将讨论尚未标准化的拟定功能，或还没有广泛实施的新标准。“CSS 与 SVG”将 SVG 图形效果和创建相似效果的 CSS 样式（如果有的话）进行比较。
虽然附注栏对于理解 SVG 颜色、图案和渐变并不是必要的，但在规划一个完整的 Web 项目时它们可能会添加重要的上下文。®Safari Books Online
Safari Books Online（http://www.safaribooksonline.com）是应运而生的数字图书馆。它同时以图书和视频的形式出版世界顶级技术和商务作家的专业作品。技术专家、软件开发人员、Web 设计师、商务人士和创意专家等，在开展调研、解决问题、学习和认证培训时，都将 Safari Books Online 视作获取资料的首选渠道。
对于组织团体、政府机构和个人，Safari Books Online 提供各种产品组合和灵活的定价策略。用户可通过一个功能完备的数据库检索系统访问 O'Reilly Media、Prentice Hall Professional、Addison-Wesley Professional、Microsoft Press、Sams、Que、Peachpit Press、Focal Press、Cisco Press、John Wiley & Sons、Syngress、Morgan Kaufmann、IBM Redbooks、Packt、Adobe Press、 FT Press、Apress、Manning、New Riders、McGraw-Hill、Jones & Bartlett、 Course Technology 以及其他几十家出版社的上千种图书、培训视频和正式出版之前的书稿。要了解 Safari Books Online 的更多信息，我们网上见。联系我们
请把对本书的评价和问题发给出版社。
美国：
O'Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
中国：
北京市西城区西直门南大街2号成铭大厦 C 座807室（100035）
奥莱利技术咨询（北京）有限公司
O'Reilly 的每一本书都有专属网页，你可以在那儿找到本书的相关信息，包括勘误表、示例代码以及其他信息。本书的网站地址是：
http://bit.ly/svg-colors-patterns-and-gradients
对于本书的评论和技术性问题，请发送电子邮件到：
bookquestions@oreilly.com
要了解更多 O'Reilly 图书、培训课程、会议和新闻的信息，请访问以下网站：http://www.oreilly.com
我们在 Facebook 的地址如下：http://facebook.com/oreilly
请关注我们的 Twitter 动态：http://twitter.com/oreillymedia
我们的 YouTube 视频地址如下：http://www.youtube.com/oreillymedia致谢
如果没有 O'Reilly 的编辑们——Simon St. Laurent、Meghan Blanchette 以及 Meg Foley（排名不分先后）——的耐心与坚持，这本书永远不会出版。非常感谢技术审查人员，是他们尽最大努力减少错误的数量并修改难以理解的表述，最终使本书达到出版质量要求，他们是：David Eisenberg、Dudley Storey、Robert Longson 以及 Sarah Drasner。
感谢 O'Reilly 团队，是他们使最终成书精美且专业。尤其感谢 Sanders Kleinfeld 调整 Pygmentize 语法来高亮显示 SVG 代码，感谢制作编辑 Colleen Lobner 应对了许多自定义请求。
还要感谢广泛的 SVG 开发者社区，包括那些使用 SVG 的开发人员和构建基础软件的开发人员。本书中许多高亮的提示、技巧、警告都是从其他人分享的博客文章、现场演示、问答论坛以及邮件列表等中收集的。电子书
扫描如下二维码，即可购买本书电子书。第1章你应该知道的事
本书假设你已经了解过 SVG、网页设计，甚至有 JavaScript 编程基础。
每一种语言都有自己的一些缺陷，而这些缺陷对有些开发者来说很明确，但对其他同样优秀的开发者来说却闻所未闻。所以本章将带你一起快速回顾一些你必须知道的东西。1.1 SVG通过代码来画图
SVG 就是一个图片文件。我们可以像使用 PNG 或 JPEG 等图片文件一样使用它，可以在可视化编辑器中创建和编辑 SVG，也可以将其作为图片嵌入到网页中。
但是 SVG 并不仅仅是图片，它是包含标记元素、文本、样式指令的结构化文档。其他图片格式是告诉计算机在屏幕上哪一点应该绘制什么颜色，而 SVG 是告诉计算机如何通过它的组成部分重组图形。这产生以下两个主要结果。● SVG 最终在屏幕上的显示依赖于软件对 SVG 规范的支持程度。
跨浏览器的兼容性往往是一个问题。● 对 SVG 的一部分单独进行增加、删除、修改的操作是非常容易
的，不用担心会改变 SVG 的其他部分。我们可以在编辑器中进
行此类操作，也可以动态地在网页中制作动画或交互图形。1.2 SVG始终是开源的
SVG 不仅仅是一组计算机编码指令，它还是人类可读的文本文件。你不仅可以在文本编辑器中编辑 SVG，甚至还可以在有语法高亮和自动补全功能的代码编辑器中编辑它。
本书的所有例子都专注于基本的 SVG 代码。当然你也可以通过可视化编辑器来画形状、选颜色、调整图形展现的其他部分。但是为了完全可控，你需要看一看编辑器实际创建的代码。1.3 SVG是XML（有时也是HTML）
文本编辑器中的 SVG 代码看起来非常像 HTML 代码（全是尖括号和属性），但是单独的 SVG 文件通常被解析为 XML。这意味着你的 SVG 通常都可以被 XML 工具解析和操控，也意味着如果你忘记引入 XML 的命名空间或者混淆了 XML 语法的重要细节，你的网页将什么都不显示。
然而，当你直接在 HTML5标记中插入 SVG 时，它将由 HTML 解析器处理。HTML 解析器会忽略一些错误（比如缺少结束标签或使用不带引号的属性），而在 XML 解析器（或大多数仅支持 SVG 的图形编辑器）中这将导致解析失败。它也会忽略自定义的命名空间，将不能识别的属性或标签名变成小写，甚至引起其他不能预期的变化。1.4 SVG是可压缩的
SVG 的大部分语法的设计都是为了使其易于阅读和理解，而不是为了结构紧凑，这使得某些 SVG 文件看起来相当冗长和冗余。但是，这也使得 SVG 非常适合通过 gzip 压缩，而网页中的 SVG 都应该被压缩。通常，这将使文件大小减少一半甚至更多。在普通的文件服务器上存储压缩过的 SVG 时，通常使用 .svgz 作为扩展名。
SVG 也是容易臃肿的，这也在另一方面使它可压缩。大多数 SVG 编辑器通过给定唯一的 XML 命名空间，在 SVG 文件中添加自己的元素和属性。有些优化工具开发了在不影响最终结果的基础上把代码剥离出来的功能。在使用这些工具时，如果你自己操作了代码，配置的时候就要特别小心，优化工具有可能会删除掉你以后想要使用的属性。1.5 图片是形状的集合
那么这所有的代码想要表现的是什么呢？当然是形状！（也可能是文本或嵌入的图像，这些我们将在后面介绍。）SVG 只有少数不同的形状元素：
每个 SVG 都是一张图片，但是它同时也是一个文档，文档中可以通过使用 元素）或者背景图片被显示时，我们将不能使用外部文件。1.7 文本也是艺术
SVG 的最后一个用途是构建文本。但是文本不是图形的替代，构成文本的字母将会像其他类型的矢量图形一样被处理。尤为重要的是，文本可以使用与矢量形状完全相同的样式属性来绘制。1.8 艺术源于数学
所有矢量图形（形状或文本）的核心是，使用每个元素的浏览器 SVG 渲染函数中的数学参数（XML 属性），控制最终效果。SVG 中最基本的数学概念是坐标系，用于确定图形中每一个点的位置。我们可以通过设置 viewBox 属性来设置初始坐标系，然后通过坐标系的转换来移动、拉伸、旋转、倾斜特定元素。1.9 SVG是无数canvas的有限集
在计算机精度允许的范围内，可以给矢量形状添加任意多个坐标。不过最终显示的是 viewBox 属性建立的特定范围坐标内的形状。通过给 preserveAspectRatio 设置不同的值来控制在宽高比不匹配时，如何把坐标的范围缩放到视图区域（viewport）。
嵌套
SVG 的结构包括渲染到屏幕上的基本形状、文本和图片以及用来定义几何图形的属性。我们可以按照逻辑来把元素进行分组，以此来创建更加丰富的 SVG。我们可以给不同的组设置不同的样式或者转换其坐标系，还可以给它们添加可访问名称和描述来解释图形到底表示什么。1.11 SVG是有样式的
SVG 图形可以仅仅由所有的样式信息都通过属性来设置的 XML 元素组成。当然，这些和表现相关的样式也可以通过 CSS 规则来设定，比如通过 class 或者元素类型来控制。还可以使用媒体属性或瞬时状态等有条件的 CSS 样式，比如 :hover 和 :focus。
严格分开几何结构（XML 属性）和表现样式（表现属性或者 CSS 样式规则）是有些武断的。随着 SVG 的发展，这两者之间的界限将越来越模糊。 SVG 2的规范草案把许多布局属性升级为表现属性。这便可以通过灵活的 CSS 语法来提供以下特性：通过类给相似元素设置一个差不多的尺寸，然后再通过 CSS 伪类或媒体查询来修改具体的尺寸或布局。1.12 所有好用的标记都基于伟大的DOM
浏览器会把 SVG 标记和样式转换成一个文档对象模型（document object model，DOM）。DOM 可以通过 JavaScript 进行操作。针对 XML 内容的 DOM 的所有核心方法同样适用，所以我们可以创建和重排元素，获取和设置属性的值，查询计算后的样式的值。
SVG 规范还定义了 SVG DOM 元素特有的属性和方法，这使得我们可以更简单地从数学角度操作几何图形。浏览器对 SVG DOM 的支持可能不尽如人意，但一些方法——比如确定一条曲线的长度——在 SVG 的设计中是不可或缺的。1.13 SVG是可移动的
在支持脚本的动态 SVG 查看器（比如 Web 浏览器）中，可以使用脚本来创建动画和可交互的图形。SVG 还支持交互的声明方式，你可以定义整个交互的范围，浏览器通过自己的优化方式来应用它。这有两种实现方式。● 借鉴 SMIL（Synchronized Multimedia Integration Language，同
步多媒体集成语言）的语法，在标记中使用动画元素。● 在表现样式中使用 CSS 动画和过渡。
在编写本书的时候，脚本动画已经得到所有 Web 浏览器的支持，但可能因为 SVG 的某些用途而受到阻碍。声明式动画（SMIL 和 CSS）在大多数浏览器中也得到了支持，但并不是所有（IE 浏览器显然是个例外）。此外，浏览器也开始实现新的 Web 动画 API，这将使得脚本可以像声明式动画那样定义和触发独立运行的动画。1.14 SVG在发展变化
在你与 SVG 交互时，不仅 SVG 图形可以单独改变，SVG 的定义也可以改变。目前（撰写本书时）的既定标准是 SVG 1.1，但具有新特性和更明确地定义已有特性的 SVG 2规范正在制定中。此外，由于 SVG 使用了 CSS 和 JavaScript，并且由于它很大程度地集成在 HTML 中，这些语言的变化也将影响 SVG。第2章画家模型
如果我让你画一个黄色的圆，然后给它加一个蓝色的轮廓，它看起来会和画一个蓝色的圆并用黄色填充的效果一样吗？
如果我让你画一个红色的五边形和一个绿色的正方形，且它们的中心点是页面中的同一点，图片的大部分会是红色还是绿色？
在用手画图时是没有固定规则的。如果有人给了你模棱两可的指示，你通常会向他寻求解释。但是当你向计算机发出指令时，它只能按着你的要求执行，所以你必须保证能准确地表达你的意思。
即使你使用 SVG 很长时间了（我们假设你至少使用过一段时间），也很可能没有深入思考过计算机是如何把 SVG 代码转换成屏幕上的彩色图案的。如果你的确要画许多这样的彩色图案，就需要知道你的指令是如何被解析的。
本章将讨论 SVG 渲染模型的基本原理，也就是计算机解析 SVG 标记和样式来生成图画的过程，还将回顾定义 SVG 图形和文本绘制方式的基本属性——fill 和 stroke。本书其余部分的内容可以概括为定义 fill 或 stroke 属性值的不同方式。
SVG 的渲染模型被称为画家模型。就像在墙上涂层，上层的内容会遮盖下层的内容。SVG 规范定义了哪些内容放在其他内容之上。本章还会讨论 z-index 和 paint-order 这两个允许你改变渲染规则的属性。这两个属性由 SVG 2引入，并且刚刚开始在一些 Web 浏览器中得到支持。所以我们也会介绍如何用 SVG 1.1的代码来实现相同的效果。2.1 使用fill属性进行填充
SVG 代码中的基本元素和属性可以精确地定义几何形状。例如创建一个1平方英寸的正方形，它的左上角就是坐标系的原点，代码如下所示：
创建一个直径为10厘米的圆，并把它放置在坐标系的中心，代码如下：
如果在你的 SVG 中仅仅包含一个圆或一个长方形的标记（或其他任何形状或文本）而没有其他的样式信息，它将在你定义的尺寸内显示一个纯黑色的区域。这是因为 fill 属性的默认值是纯黑色。
fill 属性告诉 SVG 渲染软件如何操作几何形状。对于屏幕上的每一个像素（可以对比纸上的每一个墨斑），软件都可以确定该点是不是在形状之内。如果该点在形状之内，软件就会填充 fill 的值，然后确定下一步怎么做。
在简单的例子（如默认黑色）中，填充值是一种颜色，且形状内所有的点都用该颜色替换。在其他情况中，填充值可能是一个查找更加复杂的绘画代码的指令。该指令是通过引用一个 SVG 元素的 id 的 URL 来表示的（一种渲染服务，我们将在第5章深入讨论）。 如果你不想让软件填充形状，可以把 fill 属性值设置为 none。
fill 属性（以及 stroke 属性）的最后一个可以设置的值是 currentColor 关键词。这一关键词通常被估算为给定元素的 CSS color 属性的当前值。color 属性本身对 SVG 没有直接的影响，但是结合 currentColor，它将有两个主要用途。● 使内联的 SVG 图标与它周围的 HTML 文本颜色协调。color 属性
的主要用途是设置 CSS 样式文本的颜色。因此，使用
currentColor 值的内联 SVG 图形会继承周围 HTML 标记的文本
颜色。● 为重复使用的内容提供一个间接继承的样式值。使用
素复制的 SVG 图形可以从使用它的上下文中继承 fill 和 stroke
等样式。给重复使用的图形中的重要属性使用 currentColor，这
样可以通过改变
的 fill 和 stroke 的值。
默认情况下，fill 属性被渲染为纯色且不透明（除非在渲染服务中有不同的指令）。可以通过给 fill-opacity 属性设定值来调整不透明度，它接受一个小数作为值：0到1之间的值会导致填充值和背景色混合起来渲染图形，值为1（默认值）时表示不透明，值为0时的效果相当于设置 fill 属性的值为 none。我们将在第4章中讨论不透明度。
当你不能确定图形的某一部分是在图形之内还是之外时，fill-rule 属性可以给计算机发送精确的指令。它会影响内部有洞的
fill-rule 属性有两个可选值。● evenodd 值的每一条边缘线都分隔开了图形的内部和外部。● nonzero 值（默认值）是当你从头到尾沿着一个方向画交叉的边
线时企图得到“更多的内部空间”，并且只有你在图形内部沿着
相反方向绘画来撤销它们时才会返回图形外部。
例2-1画的是一个纵横交错的
图2-1：使用 nonzero 填充规则的多边形（左）和使用 evenodd 填充规则的多边形（右）例2-1 使用 fill-rule 属性改变填充区域
➊ 最初的
➋ 最基本的拥有 fill 和 stroke 样式的多边形，它的 fill-rule 属性将继承默认的 nonzero 值。
➌ 一个水平移动 SVG 一半宽度的同一个多边形的副本。复制的多边形将继承在
无论边线或者子路径相互交叉多少次，每个点不是在图形内部就是在图形外部。每个区域不会因为它在两个不同的子路径内而被绘画两次。当使用纯色填充时这点差别看似没有多大意义，但使用部分透明来填充时它就变得非常重要。聚焦未来未来的填充本节讨论的 fill 属性都是基于当前已经发布的稳定的 SVG 1.1规范。在制定中的 SVG 2规范将提供更加灵活的方式去填充图形，尤其值得关注的是允许单个图形拥有多个填充层。这些被提及的特性将在本书其他部分作更详细的讨论，同样也是在这样的“聚焦未来”附注栏中。
SVG 中的每个图形和文本都可以被填充，且默认是填充的。这包括不闭合的
即使是一个
在计算机图形中，给形状描边的意思是指沿着它的边画一条线。不同的程序对描边的含义会有不同的解析。
在 SVG 中（目前如此），描边的实现方式是沿着主形状的边线向内和向外延伸出辅助形状。该描边区域使用与填充主形状相同的方式来渲染：软件会依次扫描并确定某个点是否在描边区域的内部。如果在，软件就会使用 stroke 属性设置的渲染指令来设置颜色。 描边形状的每个部分都只会绘制一次，无论形状中是否存在不同边重叠或交叉的部分。
stroke 的默认值是 none，即不渲染描边区域。就像 fill 属性一样，它的值还可以是色值或渲染服务元素的引用。
就像 fill-opacity 属性会改变 fill 的效果一样，描边同样也有 stroke-opacity 属性来改变它的效果。第4章会详细讨论 fill-opacity 和 stroke-opacity 属性。
还有许多与描边相关的属性，本书不准备用大量篇幅去讨论它们。但需要知道，它们可以控制描边区域的几何形状。以下是这些属性的大致介绍。
stroke-width
描边宽度，即描边的粗细。其值可以是长度值、用户单位数或者坐标系宽和高的加权百分比。在 SVG 1.1中，描边区域通常以形状的边为中心，所以描边的一半宽度在形状之内，一半在形状之外。
stroke-linecap
该属性用来给未闭合的路径或线条设置描边样式。其默认值 butt 会紧密修剪描边并且与端点垂直。其他选项（round 和 square）会以特定形状（即分别以半圆形和方形）使用一半的描边宽度来延伸描边。
stroke-linejoin
该属性用于指定在形状中拐角的描边样式。其默认值 miter 在直线上延伸描边，直到两条边在某一点相汇。其他可选值是 round（使用圆弧来连接两条描边）和 bevel（使用一根额外的直线连接两条描边）。
stroke-miterlimit
延伸斜接线可以超出形状边线的最大距离，是描边宽度的倍数（默认是宽度的四倍）。如果描边在这个距离之内没有汇合，则使用 stroke-linejoin 值为 bevel 时的效果。
stroke-dasharray
定义给形状间断描边时的距离模式（线和间隔）。其默认值 none 会给整个形状添加连续的描边。每一条线的端点都受 stroke-linecap 值的影响。
stroke-dashoffset
定义间断描边时起始偏移的距离。默认值是0。
图2-2：描边形状变化的折线。从左到右，stroke-linejoin 属性值分别为 round、 bevel 和 miter。从上到下，stroke-linecap 属性值分别为 round、butt 和 square。最后一行：stroke-linecap 属性值为 square 且 stroke-width 更粗
例2-2在同样的折线上混合搭配使用不同的 stroke-linejoin 和 stroke-linecap 属性值，生成的结果如图2-2所示。例2-2 控制描边区域的几何形状
❶ 在这个更加复杂的例子中，使用 CSS 规则的样式块根据它们的类来给元素设置 fill 和 stroke 属性值。
❷ 在
❸ 复制三份折线并将其排列到对比网格的一行中。每一个都有不同的 stroke-linejoin 样式。
❹ 复制一整行并垂直移动，每次都分配一个新的 stroke-linecap 样式。
❺ 最后一行继承了不同的 stroke-width 值。
与填充不同的是，描边区域会受到未闭合路径的影响。给
当一个图形同时拥有填充属性和描边属性时，描边区域和填充区域会有一部分重合的地方，因此重合部分会有两种特定的颜色。在所有的 SVG 中，画家模型都适用：如果两种颜色都是不透明的，则上层的颜色将会替换下层的颜色。
但是哪一层是在“上面”的呢？
默认情况下，描边是渲染在填充层之上的。这意味着你通常可以看到整个描边宽度，也意味着如果描边是半透明的话，将显示出两种颜色。填充的颜色将会出现在描边区域内部一半之下而不是外部一半之下。 描边标记——自定义形状拐角显示的标志——是在填充和描边之后渲染的，按照路径从头到尾的顺序。
在 SVG 1.1中，在把描边区域放到填充区域下的唯一方式是分成两个形状：一个仅仅描边，然后把相同的图形复制到同一位置（使用
前面的代码片段使用了大量继承的样式。
SVG 2中引入了 paint-order 属性，使得这样的效果更容易实现。它使用空格分隔的关键词（stroke、fill 以及 markers）列表来指示图形的各部分被渲染的顺序。所以可以用单个元素实现相同的效果：
你在 paint-order 属性中没有定义的渲染层将会在之后渲染（本例中的 markers），并按照它们本来的顺序渲染。这意味着如果你想调换 fill 和 stroke 的顺序，仅需要定义 stroke 就可以了。
stroke 将会最先被渲染，然后是 fill，最后是 markers。整个填充区域将始终可见，即使是与描边重叠的地方。
paint-order 的默认值（等于 fill stroke markers）可以用 normal 关键词显式地设置。 在编写本书的时候，paint-order 属性在最新的 Firefox（从31版本开始）、Blink（从35版本的 Chromium 开始）以及 WebKit（从2014年3月开始）中得到支持。IE/Edge 以及其他老版本的浏览器使用的是默认的渲染顺序。
控制渲染顺序的能力在文本中尤为重要。SVG 中的文本可以像形状一样通过描边来创建轮廓的效果。然而，即使最细的描边也会遮盖字母的细节。
通过在描边之上渲染填充区域（在颜色不同的时候），你可以加强字母的形状并恢复它的易读性。例2-3使用 paint-order 和一个很粗的描边给标题文本加了一个清晰的轮廓。图2-3是在支持的浏览器中显示的结果。
图2-3：在填充之下描边的 Outlined 文本例2-3 描边没有遮住文本的细节
如果完全依赖 paint-order 来实现这种效果，那你的文本在不支持的浏览器中将表现得一塌糊涂，如图2-4所示。所以应该要有备选策略。
图2-4：使用默认渲染顺序描边的 Outlined 文本
一种解决方式是使用 CSS 的 @supports 条件规则来控制只有在支持 paint-order 属性时才添加轮廓效果。其他情况下，如果没有达到预期的效果，就使用不同的样式来提供清晰的文本。
例2-4是例2-3代码的一个变形。样式从表现属性上移到了 style 代码块中，这样就可以使用 CSS 的条件规则了。基本的样式是在不能控制渲染顺序的时候提供更细的描边，在 @supports 块中使用粗的描边和 paint-order 属性来覆盖基本样式。例2-4 使用 paint-order 属性前先测试是否支持
在支持 paint-order 的浏览器（目前这些浏览器也都支持 @supports 规则）中的运行结果如图2-3所示。修改之后的代码在其他浏览器中的运行结果如图2-5所示。
图2-5：当不支持 paint-order 时给文本添加更细的描边 图2-3和图2-5之间 stroke-width 的值被裁掉一半还多。但是图2-5中描边仅仅略微窄一点，这是因为描边内部的一半在填充之上是可见的。
如果你不能接受使用 @supports 来改变展现规则，唯一的替代方案就是复制两个相同的元素，一个用来描边，一个用来填充。根据你使用 SVG 的方式以及对样式的控制程度，必要时可以使用脚本来控制转换。由于 paint-order 是一个新的 CSS 属性，不支持它的浏览器不会把它添加到每个元素的 style 属性上。因此，你可以检测浏览器是否支持，并在需要时生成额外的
例2-5中提供了一段脚本样例，它通过类名来鉴定元素并在需要的时候执行一系列操作。例2-5 使用多个元素来模拟 paint-order
❶ 为了方便在脚本中访问，用一个特定的类名 "outlined" 来标示要修改的元素。
❷ 可以检查任何元素（这里是指第一个被选中的元素）的 style 属性，以确定它是否支持 paint-order 属性。使用严格相等测试（===）来区别空值（元素上没有设置内联样式）和 undefined 值（属性名无法识别）。
❸ 如果需要回退，就会在每一个有 "outlined" 类名的元素上调用
试读结束[说明：试读内容隐藏了图片]