clip-rule

The clip-rule CSS property determines, when parts of the path overlap other parts, which pixels in a mask’s box are inside the clipping shape defined by a clip path and which are outside.

The clip-rule property only applies to SVG elements that are contained within a clipPath element, overriding the element’s attribute value if present. The clip-rule property basically works as the fill-rule property, except that it applies to <clipPath> definitions. It does not have any effect on CSS basic-shapes.

Values: This property is specified as one of the following keyword values:

Values: nonzero For every point in the clipping mask’s box, a ray is drawn in a random direction. Every time the ray intersects with any part of the clipping path, a tally is increased by one if the clipping path’s part is moving from left to right across the ray, whereas it is decreased by one if the path part is moving right to left across the ray. If the final total of the tally is zero, the point is outside the path’s shape. Otherwise, it’s inside the path’s shape.

Syntax example: clip-rule: nonzero;