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

有效值:   nonzero | evenodd | inherit
默认值:   nonzero

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

　　

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

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

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

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

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

理解SVG的图形填充规则的更多相关文章

  1. 理解SVG坐标系统和变换： 建立新视窗

    在SVG绘制的任何一个时刻,你可以通过嵌套<svg>或者使用例如<symbol>的元素来建立新的viewport和用户坐标系.在这篇文章中,我们将看一下我们如何这样做,以及这样 ...

  2. 理解SVG坐标系和变换：视窗,viewBox和preserveAspectRatio

    SVG元素不像HTML元素一样由CSS盒模型管理.这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观.然而,一旦你理解了SVG坐标系和变换,操纵SVG会非常简单并且很有意义.本篇文章中我 ...

  3. D3.js学习笔记（六）——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  4. SVG 基础图形

    SVG 基础图形 SVG包含了以下的基础图形元素: 矩形(包括可选的圆角),使用<rect>元素创建 圆形,使用<circle>元素创建 椭圆形,使用<ellipse&g ...

  5. 深入理解 SVG 系列（一） —— SVG 基础

    来源:https://segmentfault.com/a/1190000015652209 本系列文章分为三个部分: 第一部分是 SVG 基础. 主要讲 SVG 的一些基础知识,包括 SVG 基本元 ...

  6. 多比(SVG/VML)图形控件多比(SVG/VML)图形拓扑图控件免费下载地址

    多比图形控件是一款基于Web(VML和SVG技术)的矢量图形控件, 类似于网页上的Visio控件拓扑图软件,是目前国内外最佳的基于web的工作流设计器.工作流流程监视器解决方案. 可广泛应用于包括:电 ...

  7. 理解SVG坐标系统和变换： transform属性

    SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transf ...

  8. 【D3.V3.js系列教程】--（十五）SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

  9. 理解SVG图片标签的viewport、viewBox、preserveAspectRatio缩放

    一.viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="></svg> 上面的SVG代码定义了一个视区,宽500单 ...

随机推荐

  1. 用最简单的例子理解备忘录模式(Memento Pattern)

    简单来说,备忘录模式就是支持回退操作.假设让一个Notepad支持回退操作,如何实现呢? 首先需要一个备忘录类. public class Memento { private string _msg; ...

  2. 使用jQuery异步传递Model到控制器方法,并异步返回错误信息

    需要通过jquery传递到控制器方法的Model为: public class Person { public string Name { get; set; } public int Age { g ...

  3. 彻底理解jdbc为什么用反射创建驱动程序对象

    1.class.forName(mysql),这样更换数据库时,不需要更改程序代码,程序不需要重新编译就能运行. 因为反射是动态编译的,程序运行期间生成指定类的对象, 这样就可以程序运行期间生成不同的 ...

  4. 【POJ】【3525】Most Distant Point from the Sea

    二分+计算几何/半平面交 半平面交的学习戳这里:http://blog.csdn.net/accry/article/details/6070621 然而这题是要二分长度r……用每条直线的距离为r的平 ...

  5. OBjective-C:在可变数组NSMutableArray中添加相同对象后,进行自定义的排序方式输出

    以下为自定义的排序方式的实现 #import "Person+Compare.h" @implementation Person (Compare) -(NSComparisonR ...

  6. MySQL语法大全

    select * from emp; #注释 #--------------------------- #----命令行连接MySql--------- #启动mysql服务器 net start m ...

  7. Pow(x,n) leetcode java

    题目: Implement pow(x, n). 题解: pow(x,n)就是求x的n次方.x的N次方可以看做:x^n = x^(n/2)*x^(n/2)*x^(n%2).所以利用递归求解,当n==1 ...

  8. OkHttp 官方Wiki【设计思想】

    官方Wiki之Calls 原文位置:https://github.com/square/okhttp/wiki/Calls The HTTP client's job is to accept you ...

  9. MongoDB学习笔记（六）--复制集+sharding分片 && 总结

    复制集+sharding分片                                                               背景 主机 IP 服务及端口 Server A ...

  10. Visual Tree

    1.GetVisualParent public static T GetVisualParent<T>(DependencyObject obj) where T : Dependenc ...