fill属性可以对指定的填充对象内部的区域进行色彩填充,fill-rule属性则指定了决定那一部分是图形的内部的运算规则,文件还介绍了nonzero、evenodd及inherit的解释以及他们的对比实例。
原文:http://www.w3.org/TR/SVG/painting.html (11.3 Fill Properties)
1 SVG fill(填充)介绍
'fill'
Value:<paint> (See Specifying paint)
Initial:black
Applies to:shapes and text content elements
Inherited:yes
Percentages:N/A
Media:visual
Animatable:yes
fill(填充)属性可以对指定的填充对象内部的区域进行色彩填充,它可以在任何轮廊形形状的区域内进行,以及按规则设置数值产生不同的填充效果,宽度值为0的几何形状轮廊线是包括在内的。
在大多数情况下,fill填充属性只是一种颜色,但它也可以是渐变或图案(SVG中国会在SVG图案填充相关内容中专门介绍)。fill(填充)属性填充规则属性定义对所有路径区域填充或者只是对交叉部分填充。
大家还可以参考“第六课 SVG填充(fill)”一文来更详细理解SVG fill填充,后面介绍SVGfill-rule填充规则。
2 SVG fill-rule填充规则
介绍fill-rule填充规则的evenodd、nonzero及inherit的应用。'fill-rule'
Value:nonzero | evenodd | inherit
Initial:nonzero
Applies to:shapes and text content elements
Inherited:yes
Percentages:N/A
Media:visual
Animatable:yes
'fill-rule'属性指定了决定那一部分是图形的内部的运算规则。对一个没有交叉的路径来说,那一部分属于它的内部是很显然的,但是对于复杂一点的路径来说,内部的阐明并不明显。
'fill-rule'属性提供了两种怎样决定图形内部的两种选择:
2.1 nonzero
本规则决定一个点是否在图形内部的方法是从该点向任意方向画直线,然后检查直线与图形的交叉。如果该点左右与图形交叉点数相同,则该点在图形外,否则在图形内。
查看图1的SVG实例
2.2 evenodd
本规则通过从一点向任意方向画直线然后计算该直线与图形的交叉电的数量来决定该点是否在图形内。如果交叉点数为奇数,则该点在图形内,否则在图形外。
查看图2的SVG实例
2.3 inherit
"inherit" 指的是当前物件的填充属性和围绕它的物件(或物件组)的属性一致。
3 SVG fill-rule属性:nonzero与evenodd的比较
nonzero与evenodd的比较,见图3。
查看图3的SVG实例
(THE END)