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的初学者,如果文章中有不对之处,烦请各路大婶拍正。如果你有更好的经验或想法,欢迎在下面的评论中与我们一起分享。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180104B114NG00?refer=cp_1026

同媒体快讯

相关快讯

扫码关注云+社区