SVG的图形填充规则通过fill-rule属性来指定。 fill-rule属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” (内部区域将被填充)。对一个简单的无交叉的路径,哪块区域是“内部” 是很直观清除的。但是,对一个复杂的路径,比如自相交或者一个子路径包围另一个子路径,“内部”的理解就不那么明确...
// canvas ctx.fill('nonzero'); // 默认非零可不传 ctx.fill('evenodd'); // 奇偶 //svg <path fill-rule="nonzero"/> // 默认非零可不传 <path fill-rule="evenodd"/> // 奇偶 Bentley-Ottmann Bentley-Ottmann是一个求平面上所有线段交点的算法,属于扫描线算法的一种。 扫描线算法是指引入...
fill属性用于给形状填充颜色。 svgline{fill:#000;/* 填充黑色 */} 填充色的透明度通过fill-opacity设置。 fill-rule用于设置填充方式,算法较为抽象,除了inherit这个取值,还可取以下两种值: nonzero:这个值采用的算法是:从需要判定的点向任意方向发射线,然后计算图形与线段交点的处的走向;计算结果从0开始,每有一...
最后,不要去钻相切的牛角尖,因为射线是任意的,如果有相切,那么换个方向再画。 这是用我自己的方式理解的fill-rule属性。
fill-rule决定的复杂形状的填充方式。fill-rule可以采用两个不同的值 。这些值是: 2.1 nonzero 通常,这两个值是确定形状内部和外部形状的规则。仅内部填充,对于一个圆来说,这很简单,但是对于更复杂的形状,这并不是那么容易。 示例 复制 <svg width="500"height="120"><path d="M50,20 l40,40 l-40,40...
这是使用fill-rule:non-zero绘制时的结果图像。 2.2 evenodd 这是相同的路径示例,使用fill-rule:evenodd。 示例 代码语言:javascript 复制 <svg width="500"height="120"><path d="M50,20l40,40l-40,40l-40,-40l40,-40M50,40l20,20l-20,20l-20,-20l20,-20" ...
这是使用fill-rule:non-zero绘制时的结果图像。 2.2 evenodd 这是相同的路径示例,使用fill-rule:evenodd。 示例 <svg width="500" height="120"><path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40M50,40 l20,20 l-20,20 l-20,-20 l20,-20"style="stroke: #000000;fill: #6666ff;fill...
fill-rule属性 填充模式,有效值: nonzero | evenodd fill-rule属性 用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” (内部区域将被填充)。 对一个简单的无交叉的路径,哪块区域是“内部” 是很直观清除的。但是,对一个复杂的路径,比如自相交或者一个子路径包围另一个子路径,“内部”的理解...
The fill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape.
很多工具导出的 SVG,是会忽略一些属性的,而这些属性如果没有值,我们是没办法正确显示的。所以我们需要针对它们设置默认值。例如 fill 默认应该是 none,stroke 默认是 black,stroke-width 默认为1px,fill-rule 默认为 nonzero。这里重点说一下 fill-rule,它分为 evenodd 和 nonzero 两种方式: ...