SVG——新一代Web设计及互动媒体的革新

SVG fill填充与fill-rule填充规则属性

SVG fill填充与fill-rule填充规则属性   fill属性可以对指定的填充对象内部的区域进行色彩填充,fill-rule属性则指定了决定那一部分是图形的内部的运算规则,文件还介绍了nonzero、evenodd及inherit的解释以及他们的对比实例。

来源:SVG中国(ChinaSVG.COM)  [SVG中国翻译资料]
原文: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 fill-rule属性nonzero实例

  查看图1的SVG实例

2.2 evenodd

  本规则通过从一点向任意方向画直线然后计算该直线与图形的交叉电的数量来决定该点是否在图形内。如果交叉点数为奇数,则该点在图形内,否则在图形外。

图2 fill-rule属性evenodd实例

  查看图2的SVG实例

2.3 inherit

  "inherit" 指的是当前物件的填充属性和围绕它的物件(或物件组)的属性一致。

3 SVG fill-rule属性:nonzero与evenodd的比较

  nonzero与evenodd的比较,见图3。

图3 fill-rule属性nonzero与evenodd的比较

  查看图3的SVG实例

(THE END)

 

将要更新