SVG之旅：填充特性

通过前面的学习，你可以用你掌握的知识来绘制任何图形，接下来的目标是给绘制的图形着色。可以使用几种方法来着色，包括指定对象的属性，使用内联CSS样式或者内嵌的CSS样式，或者使用外部的CSS样式文件。大多数的Web网站的SVG使用的是内联样式CSS。但这些方法都有各自的优缺点。

在SVG中要给已绘制好的图形着色，我们主要通过SVG的填充和描边特性来完成。比如在前面的示例中，我们常能看到的属性，就是用来给图形设置填充颜色；属性设置绘制对象的线条的颜色。但SVG的填充和描边特性不仅仅就这两个属性，那么今天的目标就是来学习这方面的特性。

首先我们要知道，在SVG中要让绘制的图形显示出来，就必须使用以下指定填充和描边特性：

SVG填充特性

在SVG2的规范中涉及到有关于填充特性主要有上表所列的几个特性，但是在CSS 填充和描边模块（Level3）中除了上表的几个特性之外，还有、、、、、和几个，看上去非常的类似于CSS中的属性。

但在这篇文章中，只会初步的涉略上表中所列的几个填充特性，其他有关于填充的特性将会在其他的章节中进行介绍。

在这篇文章中，我们主要来了解和学习SVG中的、和三个属性。

特性

在SVG中，可以使用给绘制的图形填充色，而填充色又分为三种：纯色、渐变色和图案。掌握这些技能，直接能决定你绘制的图形是否能引人入胜。

纯色填充

纯色填充其实没有什么特别，只需要在属性中添加颜色值就可以完成。其遵循的规则有：

基本颜色名称，比如：、、这样的颜色关键词

SVG规范中规定的扩展颜色名称

六位十六进制数字，从前往后，每两位分别表示、和颜色值

三位十六进制数字，三位数字分别表示、和颜色值。这是六位十六进制数字的缩写

，、、分别是、和，其每个值的范围是或

，来自元素的（当前运用的）属性，一般是继承的

CSS3颜色模块规范规定的其他方法

说了这么多，我们来看一个简单的示例：

效果如下：

渐变填充

SVG中还可以使用渐变来填充，但这一部分咱们还没有接触过。而渐变又分为线性渐变、径向渐变和角度渐变。但在SVG中渐变的做法较为特殊，首先要先定义一个渐变层，接着让需要使用渐变的元件，指向这个已定义的渐变层。由于没有接触过SVG中的渐变相关的知识，但并不要紧，我们继续使用老办法，通过制图软件来绘制，然后导出相应的代码。 比如我们绘制了对应的三种渐变：

在绘制的时候，每一种都可以在对应的面板中选择颜色以及调整颜色的位置，比如：

接下来导出的文件，查看清理后的代码：

上面实际效果中只有线性渐变和径向渐变生效，对于角度渐变是无效的：

至于为什么？暂时我也说不清楚。咱们先忽略。从上面的代码中，可以看到中包含了（线性渐变）和（径向渐变）。不管是哪种渐变，都通过来指定渐变的颜色和位置。把上面的代码简写一下：

分别给指定的渐变添加唯一的名，这主要是为了让要引用渐变填充的元素可以有一个指向（更好引用）。至于中的和起的作用，大家也许有些许了解，这也不是这里需要详细阐述的内容。

然后使用的时候，可以在中通过来引用，比如：

有关于SVG中渐变更详细的介绍，我们在后续的文章中会阐述，这里只需要知道，在SVG中可以通过来做渐变填充即可。

图案填充

看完了渐变填充之后，再来看最后一个图案填充。其实现的方式和渐变有点类似，同要需要先在中加入，这个表示的是一个图案的区域，会用这个区域进行重复排列图案。同样在元素的属性中通过来调用中已声明的，比如：

你将看到的效果如下：

特性

特性类似于CSS的属性。用来设置元素填充的透明度。其值的范围不是。接近的值，元素填充更趋于透明，反之越接近，则元素填充趋于完全不透明。其默认值为。来看一个简单的示例：

效果如下：

从上面的示例中，可以看出，不管是纯色、渐变还是图案填充，只要元素上使用了属性，都可以设置元素的填充透明度。

特性

特性相对而言要更复杂一些。其定义了判断点是不是属于填充范围的算法，其值有、和。咱们主要来了解和的算法。

这个值采用的算法是：从需要判定的点向任意方向发射线，然后计算图形与线段交点的处的走向；计算结果从开始，每有一个交点处的线段是从左到右的，就加；每有一个交点处的线段是从右到左的，就减；这样计算完所有交点后，如果这个计算的结果不等于，则该点在图形内，需要填充；如果该值等于，则在图形外，不需要填充。比如下图：

来看一个示例：

效果如下：

星星是由一条相交的路径组成的，太阳则是由一条长复合的路径组成。每个形状的内部最初并不清楚，可能根据作者的意图而有所不同。在这些情况下，允许进一步澄清。

在下一个例子中，我们可以看得更清楚些，当算法被应用到类似的图形时，究竟发生了什么？

从上图中我们可以理解成，当方向是顺时针时，加，逆时针时减。相交的值不等于则填充，如果等于则不填充。

这个值采用的算法是，从需要判定的点向任意方向发射线，然后计算图形与线段交点的个数，个数为奇数则该点在图形内，则需要填充；个数为偶数，则该点在图形外，不需要填充。如下图所示：

上面的示例稍作调整：

运用的星星和太阳的效果就和刚才的不一样了：

同样用一张图来描述，可能更易于理解：

规则是特定的算法，与情况不同，其算法和内部形状绘制的方向不相关，因为只是简单地计算它们穿过直线的路径数是不是奇偶数。

上面我们了解了SVG中的填充特性，除此之外，还有描边特性：

在SVG2的规范中，除了上表所列之外的特性，还有。但在CSS 填充和描边模块（Level3）中除了上述所列的几个特性之外，还有以下一些特性：、、、、、、、、等特性。

由于担心篇幅过长，将SVG的描边特性放到下一节中来阐述。

使用CSS

除了定义对象的属性外，你也可以通过CSS来样式化填充（当然后面的描边也可以）。语法和在HTML中使用CSS一样，只不过你要把换成。

需要特别注意的是，在SVG中不是所有的属性都能用CSS来设置。上色和填充的部分一般是可以用CSS来设置的，比如，但是不包括上面提到的渐变和图案等功能。另外，、以及的命令等，都不能用CSS来设置。判断它们能不能用CSS设置还是比较容易的。

SVG规范将属性区分成和其他，前者是可以用CSS来设置，后者则不能。

用简单的示例来展示，更为明显：

或者:

你也还可以在单独的文件中使用：

#MyRect{fill:red;}

总结

前面的内容我们是学习了在SVG中怎么绘制图形。事实上，在SVG中绘制的图形要着色的话是需要通过其他的特性来完成的，比如填充就需要特性。而在这篇文章中，主要学习了如何给绘制的元素填充（纯色、渐变和图案）。主要涉及到三个属性：用来填充颜色（或图案），用来设置填充的透明度和用来指定判断填充的算法。

在SVG中绘制的图形除了填充之外，还有描边着色之类的。比如文章列表中提到的描边特性。那么在下一篇文章中，将主要来学习这方面的知识。如果你感兴趣的话，欢迎持续观注本系列的相关更新。

由于本人是SVG的初学者，如果文章中有不对之处，烦请各路大婶拍正。如果你有更好的经验或想法，欢迎在下面的评论中与我们一起分享。