博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
理解SVG的图形填充规则
阅读量:7133 次
发布时间:2019-06-28

本文共 554 字,大约阅读时间需要 1 分钟。

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

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

 

 

 

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

  

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

Image showing nonzero fill rule

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

Image showing evenodd fill rule

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

转载地址:http://vbcrl.baihongyu.com/

你可能感兴趣的文章
up_modembin.sh
查看>>
Oracle 用Drapper进行like模糊传参查询需要在参数值前后带%符合
查看>>
Got a packet bigger than 'max_allowed_packet' bytes
查看>>
C++11常用特性的使用经验总结(转载)
查看>>
[PCB设计] 3、用CAM350修改GERBER文件(删除某些部分)
查看>>
Ganglia 入门介绍及解决fsockopen error: Connection refused问题
查看>>
Linux 下 FastDFS v5.08 分布式文件系统的安装
查看>>
nginx常用配置说明
查看>>
微型服务器
查看>>
搭建Weblogic服务器
查看>>
Java自定义注解
查看>>
Tomcat Deployment failure ,locked one or more files
查看>>
Android 迭代器 Iteraor迭代器以及foreach的使用
查看>>
阿里云ECS服务器Linux环境下配置php服务器(二)--phpMyAdmin篇
查看>>
将调试相关日志打印到文件里
查看>>
dedecms下的tplcache模板缓存文件过多怎么清理?
查看>>
度量术语之中的一个:研发阶段(工作量分类)
查看>>
vue教程2-02 vue防止花括号{{}}闪烁,v-text和v-html、v-cloak
查看>>
hibernate中继承映射保存
查看>>
JAVA模拟登录实例
查看>>