How CSS clip-path path Parses SVG Coordinate Strings

The CSS clip-path: path() function allows developers to use SVG path syntax directly within stylesheets to define complex clipping boundaries. This article explains how browsers parse the coordinate strings supplied to path(), how SVG commands translate into CSS rendering rules, how units and coordinate systems are mapped, and how the browser determines which areas of an element remain visible.

SVG Path Data Syntax

The path() function accepts a string literal containing standard SVG path data commands, matching the specification of the SVG d attribute. The browser's CSS parser processes this string character by character, separating commands from numeric coordinate parameters.

Commands inside the string fall into two structural categories:

  • Uppercase commands (Absolute): Evaluated relative to the origin (0, 0) of the reference box. Examples include M (moveto), L (lineto), C (cubic Bézier curve), and Z (closepath).
  • Lowercase commands (Relative): Evaluated relative to the end position of the preceding command. Examples include m, l, and c.

Separators between coordinates can be whitespace, commas, or negative signs (e.g., 10-20 is parsed as 10 and -20).

Coordinate Space and Unit Mapping

Unlike standard SVG elements that can use viewBox scaling or flexible percentages, the path() function in CSS operates under fixed coordinate rules:

  1. User Units Map to Pixels: Numbers inside the coordinate string are unitless per SVG syntax specifications. The CSS engine maps every unitless number directly to CSS pixels (px). For instance, M 10 20 moves the clipping point to 10px along the X-axis and 20px along the Y-axis.
  2. Reference Box Origin: By default, coordinates resolve against the top-left corner (0, 0) of the element's border-box, unless another reference box (such as padding-box or content-box) is declared alongside clip-path.
  3. Lack of Native Responsive Scaling: Because the path string only accepts unitless values, coordinates do not automatically stretch to fit the element's width or height. To scale a path dynamically with an element, authors must apply CSS transforms, use transform-box, or use an external SVG <clipPath> element paired with clipPathUnits="objectBoundingBox".

Fill Rules for Defining Interior Regions

The browser determines which side of the path boundary constitutes the "inside" (the clipped visible area) using a fill-rule algorithm. An optional fill rule keyword can precede the path string:

  • nonzero (Default): A ray is drawn from a point to infinity in any direction. The parser counts path segments crossing the ray: left-to-right crossings count as +1, and right-to-left crossings count as -1. If the net sum is not zero, the point is inside the clipping area.
  • evenodd: A ray is drawn from a point to infinity in any direction. The parser counts the total number of path segments crossed. If the total is an odd number, the point is inside; if even, it is outside. This rule is ideal for shapes with cutouts or overlapping segments.

Syntax example:

clip-path: path(evenodd, "M 0 0 L 100 0 L 100 100 L 0 100 Z M 25 25 L 75 25 L 75 75 L 25 75 Z");

Parsing Errors and Fallback Behavior

CSS parsers treat the contents of path() strictly. If the coordinate string contains syntax errors—such as unknown command letters, incorrect numbers of arguments for a given command (e.g., supplying five coordinates to a cubic Bézier C command instead of six), or invalid characters—the browser flags the entire clip-path declaration as invalid. When this occurs, the property is discarded, and the element renders without clipping.