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. java基础学习总结——开篇

    java是我学习的第一门编程语言,当初学习java基础的时候下了不少功夫,趁着这段时间找工作之际,好好整理一下以前学习java基础时记录的笔记,当作是对java基础学习的一个总结吧,将每一个java的 ...

  2. MVC批量更新,使用jQuery Template

    在"MVC批量更新,可验证并解决集合元素不连续控制器接收不完全的问题"中,当点击"添加"按钮的时候,通过部分视图,在界面上添加新行.本篇体验使用jQuery T ...

  3. EasyUI相同的Tab只打开一个（即EasyUI方法的调用方法）

    function addTabA(title){ if ($('#tt').tabs('exists', title)){ $('#tt').tabs('select', title); } else ...

  4. table固定首行(一)

    <html> <head> <title>Untitled Document</title> <meta http-equiv="Con ...

  5. openshift 添加cron定时任务

    一般linux添加cron任务是在/etc/crontab,但是由于openshift的权限木有这么开放,所以如果需要设置定时任务的话,需要在如下的文件夹下添加你的sh文件,因为我需要的是每天运行一次 ...

  6. C语言变量的类型和存储位置

    . C语言变量主要分为全局变量.静态全局变量.局部变量.静态局部变量和寄存器变量.其中静态变量用static关键字进行修饰.程序所占用的内存可以分为以下几个部分: ()代码段-存放程序代码,只读的,不 ...

  7. 用户组篇endgrent getpw getuid

    endgrent(关闭组文件) 相关函数 getgrent,setgrent 表头文件 #include<grp.h> #include<sys/types.h> 定义函数 v ...

  8. 使用Jenkins和Jmeter搭建性能测试平台

    参考文档:http://blog.csdn.net/liuchunming033/article/details/52186157 jenkins的性能测试结果展现插件:https://wiki.je ...

  9. OTL翻译(10) -- OTL的流缓冲池

    OTL的流缓冲池 一般来讲,流一般作为一个局部的变量被使用,当使用完毕后就立刻关闭,如果需要再次使用就需要再次的声明变量,如此循环.OTL流的缓冲池(内存池)是一个解决以往的流性能低下的一个机制.当流 ...

  10. Informatica 常用组件Lookup缓存之五 使用动态查找高速缓存

    对于关系查找,当目标表也是查找表时,可能要配置转换以使用动态高速缓存.PowerCenter 将在处理第一个查找请求时创建高速缓存.它将根据查找条件为传递给转换的每行查询高速缓存.当您使用动态高速缓存 ...