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. 如何使用==操作符,Equals方法,ReferenceEquals方法,IEquatable接口比较2个对象

    "世界上不会有两片完全相同的树叶",这句话适用于现实世界.而在软件世界中,这句话变成了"世界上必须有两片完全相同的树叶",否则,很多事情无以为继. 当比较2个对 ...

  2. MVC文件上传08-使用客户端jQuery-File-Upload插件和服务端Backload组件让每个用户有专属文件夹

    当需要为每个用户建立一个专属上传文件夹的时候,可以在提交文件的视图中添加一个隐藏域,并设置name="objectContext". 相关兄弟篇: MVC文件上传01-使用jque ...

  3. zookeeper原理及功能介绍（转）

    本文转自https://www.cnblogs.com/onetwo/p/6420062.html 1.ZooKeeper是什么? ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务, ...

  4. spring mvc实现restful

    restful它的核心是将所有的 Api 都理解为一个网络资源.把api映射成资源 restful它的核心是将所有的 Api 都理解为一个网络资源.把api映射成资源 把api映射成资源,把api映射 ...

  5. JavaScript对于函数的调用及原理

    <js> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...

  6. Java读取properties配置文件时，中文乱码解决方法

    public static String getConfig(String key) { Properties pros = new Properties(); String value = &quo ...

  7. 关于JAVA多线程并发synchronized的测试与合理使用

    在项目开发中, 或许会碰到JAVA的多线程处理, 为保证业务数据的正常, 必须加上锁机制,  常用的处理方法一般是加上synchronized关键字, 目前JDK版本对synchronized已经做了 ...

  8. iOS开发-JSON解析

    JSON(JavaScript Object Notation)在网络传输中几乎无处不在,JSON是一种轻量级的数据交换格式,是基于JavaScript(Standard ECMA-262 3rd E ...

  9. CentOS开启和关闭防火墙

    CentOS Linux开启和关闭防火墙命令有两种,一种是临时的,重启即复原:另外一种是永久性的,重启不会复原.   1) 临时生效,重启后复原 开启: service iptables start ...

  10. Windows 8.1 64位版本安装.Net Framework3.5

    最近刚把个人电脑切换成了Win 8.1 64位版本,但在使用某些Ms的某此产品时会提示没有安装.Net Framework3.5,但按照他的提示需要在线安装而且速度很慢,因为之前搞过WinServer ...