zoukankan      html  css  js  c++  java
  • 理解SVG的图形填充规则

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

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

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

      

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

    Image showing nonzero fill rule

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

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

    Image showing evenodd fill rule

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

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

  • 相关阅读:
    在Springboot 中使用 flyway
    Ryu 学习资料总结
    OpenDaylight 学习资料整理
    在 Ubuntu16.04 上安装 etcd
    ovs 连接 Floodlight 控制器
    etcd 学习资料整理
    Floodlight 学习资料整理
    算法用例
    数据库
    他山之石
  • 原文地址:https://www.cnblogs.com/caoyc/p/4848428.html
Copyright © 2011-2022 走看看