理解SVG的图形填充规则
2013-01-30 10:31
501 查看
本文内容翻译自W3.org网站的SVG规范,作为自己的备忘,供SVG初学者参考。
原文网址:
SVG fill-rule property in SVG 1.1 (Second Edition)
SVG的图形填充规则通过fill-rule属性来指定。
‘fill-rule’
‘fill-rule’
属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” (内部区域将被填充)。对一个简单的无交叉的路径,哪块区域是“内部” 是很直观清除的。但是,对一个复杂的路径,比如自相交或者一个子路径包围另一个子路径,“内部”的理解就不那么明确了。
‘fill-rule’
属性提供两种选项用于指定如何判断图形的“内部”:
nonzero 字面意思是“非零”。按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点情况。从0开始计数,路径从左向右穿过射线则计数加1,从右向左穿过射线则计数减1。得出计数结果后,如果结果是0,则认为点在图形外部,否则认为在内部。下图演示了nonzero规则:
点击查看示例SVG文件 (仅适用于支持SVG的浏览器)
evenodd
字面意思是“奇偶”。按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部,是偶数则认为点在外部。下图演示了evenodd
规则:
点击查看示例SVG文件 (仅适用于支持SVG的浏览器)
(提示: 上述解释未指出当路径片段与射线重合或者相切的时候怎么办,因为任意方向的射线都可以,那么只需要简单的选择另一条没有这种特殊情况的射线即可。)
原文网址:
SVG fill-rule property in SVG 1.1 (Second Edition)
SVG的图形填充规则通过fill-rule属性来指定。
‘fill-rule’
有效值: | nonzero | evenodd | inherit |
默认值: | nonzero |
应用于: | shape形状类元素 和 文字内容类元素 |
可继承: | 是 |
比例: | 无 |
媒体: | 可见 |
动画可用: | 是 |
属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” (内部区域将被填充)。对一个简单的无交叉的路径,哪块区域是“内部” 是很直观清除的。但是,对一个复杂的路径,比如自相交或者一个子路径包围另一个子路径,“内部”的理解就不那么明确了。
‘fill-rule’
属性提供两种选项用于指定如何判断图形的“内部”:
nonzero 字面意思是“非零”。按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点情况。从0开始计数,路径从左向右穿过射线则计数加1,从右向左穿过射线则计数减1。得出计数结果后,如果结果是0,则认为点在图形外部,否则认为在内部。下图演示了nonzero规则:
点击查看示例SVG文件 (仅适用于支持SVG的浏览器)
evenodd
字面意思是“奇偶”。按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部,是偶数则认为点在外部。下图演示了evenodd
规则:
点击查看示例SVG文件 (仅适用于支持SVG的浏览器)
(提示: 上述解释未指出当路径片段与射线重合或者相切的时候怎么办,因为任意方向的射线都可以,那么只需要简单的选择另一条没有这种特殊情况的射线即可。)
相关文章推荐
- 理解SVG的图形填充规则
- 理解SVG的图形填充规则
- 实际问题:水印平铺,以二维规则小图形对大图形进行填充问题解决
- VISIO,不规则封闭图形填充方法
- MFC填充任意不规则图形
- Open gl 的不规则图形的4联通种子递归填充和扫描线种子递归填充算法实现
- VISIO 2010,不规则封闭图形填充方法
- 深入理解类的填充规则
- Graphic 矢量图形的区域填充与缠绕规则
- D3 笔记二:SVG、Canvas、画布、矩形、填充图形
- 理解Silverlight的路径填充规则
- Graphic 矢量图形的区域填充与缠绕规则
- VC 如何对不规则图形填充颜色
- 二维规则小图形对大图形进行填充,求出最左上坐标
- Open gl 的不规则图形的4联通种子递归填充和扫描线种子递归填充算法实现
- 理解SVG的viewport,viewBox,preserveAspectRatio
- 【D3.V3.js系列教程】--(十五)SVG基本图形绘制
- 使用SVG内置API计算图形或点经过transform之后的新坐标
- 对makefile 中的 静态模式规则的理解
- 深入理解Access和Trunk端口的报文收发规则