理解SVG的图形填充规则

翻译 2012年08月09日 17:11:53

本文内容翻译自W3.org网站的SVG规范,作为自己的备忘,供SVG初学者参考。

原文网址: SVG fill-rule property in SVG 1.1 (Second Edition)

SVG的图形填充规则通过fill-rule属性来指定。

‘fill-rule’
有效值:   nonzero | evenodd | inherit
默认值:   nonzero
应用于:   shape形状类元素 和 文字内容类元素
可继承:  
比例:  
媒体:   可见
动画可用:  

 ‘fill-rule’ 属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” (内部区域将被填充)。对一个简单的无交叉的路径,哪块区域是“内部” 是很直观清除的。但是,对一个复杂的路径,比如自相交或者一个子路径包围另一个子路径,“内部”的理解就不那么明确了。

 ‘fill-rule’ 属性提供两种选项用于指定如何判断图形的“内部”:

nonzero
字面意思是“非零”。按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点情况。从0开始计数,路径从左向右穿过射线则计数加1,从右向左穿过射线则计数减1。得出计数结果后,如果结果是0,则认为点在图形外部,否则认为在内部。下图演示了nonzero规则:

Image showing nonzero fill rule

点击查看示例SVG文件 (仅适用于支持SVG的浏览器)

evenodd
字面意思是“奇偶”。按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部,是偶数则认为点在外部。下图演示了evenodd 规则:

Image showing evenodd fill rule

点击查看示例SVG文件 (仅适用于支持SVG的浏览器)

(提示: 上述解释未指出当路径片段与射线重合或者相切的时候怎么办,因为任意方向的射线都可以,那么只需要简单的选择另一条没有这种特殊情况的射线即可。)

svg中fill-rule属性解析

fill-rule属性规定了svg图形的填充规则 fill-rule 有效值 nonzero / evenodd / inherit 默认值 nonzero 应用于 s...
  • wjnf012
  • wjnf012
  • 2017年06月06日 10:42
  • 1263

SVG图标颜色文字般继承与填充

转自:http://www.zhangxinxu.com/wordpress/?p=4286 一、接上篇 前文介绍了SVG Sprites身材和内涵,顺大便客观的评价了SVG ...
  • auragreen
  • auragreen
  • 2016年08月15日 16:32
  • 3616

svg画五角星,关于fill-rule的理解

先上代码   画出来是这样的 把fill-rule改成evenodd后,是这样的 先看看官方文档里面fill-rule两个属性的解释, nonzero—这个规则通过从c...
  • mishiwjp
  • mishiwjp
  • 2016年12月06日 10:46
  • 2736

理解SVG的图形填充规则

本文内容翻译自W3.org网站的SVG规范,作为自己的备忘,供SVG初学者参考。 原文网址: SVG fill-rule property in SVG 1.1 (Second Edition)...
  • luqin1988
  • luqin1988
  • 2013年01月30日 10:31
  • 964

图论的算法与程序设计教程 PDG 内容大部分是关于编程图形的 比如求最小路径、求最小生成树、连通性的概念及规则等,这种算法非固定于一种编程语言,理解了内核可以应用到许多的编程语言中。

  • 2010年03月19日 12:43
  • 5.07MB
  • 下载

Graphic 矢量图形的区域填充与缠绕规则

1. 缠绕规则概念 增强的绘图 API 还引入了路径“缠绕”的概念:路径的方向。 路径的缠绕可以是正向的(顺时针),也可以是负向的(逆时针)。渲染器为 data 参数解释矢量所提供坐标的顺序确...
  • TKWDmylove
  • TKWDmylove
  • 2015年10月20日 14:19
  • 327

网络图形标准svg的特征与实现

  • 2010年05月25日 10:00
  • 298KB
  • 下载

svg动态图形

  • 2013年05月15日 15:17
  • 10KB
  • 下载

学习SVG图形知识的教程

  • 2011年03月04日 11:43
  • 833KB
  • 下载

SVG可伸缩向量图形介绍

  • 2012年10月07日 17:49
  • 910KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:理解SVG的图形填充规则
举报原因:
原因补充:

(最多只允许输入30个字)