w3c标准图示：
evenodd
fillrule-evenodd.png
nonzero；
fillrule-nonzero.png
要判断一个点是否在图形内，需要从该点作任意方向的一条射线，然后检测射线与图形路径的交点值，假设为x，x初始值为0。
对于evenodd，每相交一次，x+1，最后的结果如果x为奇数则该点在图形内，如果为偶数则在图形外。
对于nonzero，情况则复杂一些，每相交一次，x的值也会变化，不过这个变化和你的射线同路径相交的方向有关。要知道路径本身是一个向量（也就是有方向的线段），你画的射线也有方向，则射线同路径相交的方向一定会有两种方向，从路径左侧相交和右侧相交。你可以任意假设一个方向为正，那么另一个相交方向为负，比如我假设左相交为正，那么右相交则为负。此时，计算x的方法是，正相交+1，负相交-1，看最后x的值，如果为0，则该点在图形外，如果不为0则在图形内。
最后，不要去钻相切的牛角尖，因为射线是任意的，如果有相切，那么换个方向再画。
这是用我自己的方式理解的fill-rule属性。
SVG的图形填充规则通过fill-rule属性来指定。‘fill-rule’有效值: nonzero | eve...
w3c标准图示：evenodd nonzero； 要判断一个点是否在图形内，需要从该点作任意方向的一条射线，然后检...
该属性决定了怎么样把坐标系统（viewBox）塞到SVG视口（width，height）里。 配合在线实例往下看：...
在 svg 根标签添加如下属性（从左上角开始等比缩放） 动态设置 svg 的 viewBox 属性（viewBox...
边样式 节点样式 标签样式 基础样式和特殊样式 1 .支持所有原生SVG属性2 .特殊属性提供了比原生svg属性更...
SVG基础 概念 作用于SVG标签的属性 作用于SVG内部元素的样式 SVG内部元素 一、概念 该部分主要说明SV...
svg 设置属性 fill 为 currentColorpath 不设置属性 fill 正确 错误 脚本
svg画图API: svg 画图适合做什么: 矢量图 图表 性能一般 交互容易 svg 属性width he...
其实svg跟其他元素一样，可以通过 class 选择器来设置对应的属性，只是svg的属性是特定的 可以通过 cla...
属性值 viewBox值有4个数字： 感性理解 viewBox形象的解释就是：SVG就像是我们的显示器屏幕，vie...
本文标题：理解SVG的fill-rule属性
本文链接：https://www.haomeiwen.com/subject/ojqgvttx.html
网友评论