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. spring事務

    spring事物 spring事物其实就是对数据库事物的一种支持,没有数据库事物的话,spring本身是不能提供事物支持的: 在最开始使用原始的jdbc连接数据库进行炒操作是, 获取连接后可以使用co ...

  2. 安全：Web 安全学习笔记

    背景 说来惭愧,6 年的 web 编程生涯,一直没有真正系统的学习 web 安全知识(认证和授权除外),这个月看了一本<Web 安全设计之道>,书中的内容多是从微软官方文档翻译而来,这本书 ...

  3. 比較两个 List 的值是否相等

    public static <T extends Comparable<T>> boolean compare(List<T> a, List<T> b ...

  4. 第二章 ActionScript 3.0学习之画星星（鼠标及键盘事件）

    今天觉得学到的比较有趣,所以记录之......~~~ 下面这段就是画出星星的代码:StarShape.as package { import flash.display.Shape; import f ...

  5. 在windows上搭建C语言开发环境——借助eclipse和MinGW

    0. 前言     [本文目的]     近期在电脑上又一次安装了MinGW,发现MinGW的安装方法和之前的方法稍有差别,全部再写了一篇博文记录一下具体的安装方法.     [本文主要内容]     ...

  6. 如何读取抓取的wifi包内容

    有密码的WIFI,WIFI的密码会生成一个临时会话密钥,这个临时会话密钥可以用来加密会话内容,也就是说.比如你在浏览网页,用有密码的WIFI,连接上以后,浏览的网页流量是加密了的,所以更安全.无密码的 ...

  7. 数学图形(1.2)Sin曲线

    相关软件参见:数学图形可视化工具,使用自己定义语法的脚本代码生成数学图形.该软件免费开源.QQ交流群: 367752815 Sin曲线 vertices = x = *PI) to (*PI) y = ...

  8. 第二十一章 springboot + 定时任务

    1.application.properties #cron job.everysecond.cron=0/1 * * * * * job.everytensecond.cron=0/10 * * * ...

  9. 第十二章 springboot + mongodb（复杂查询）

    简单查询:使用自定义的XxxRepository接口即可.(见 第十一章 springboot + mongodb(简单查询)) 复杂查询:使用MongoTemplate以及一些查询条件构建类(Bas ...

  10. Android之PowerManager&BatteryManager

    PowerManager是Android平台中用于管理控制设备电源状态.重启.休眠状态.唤醒等,使用该API会影响到电池的待机时间,所以无非必要,一般不要使用. 在PowerManager中有几个比较 ...