path() support in clip-path CSS property

So far clip-path only supported other basic shapes (circle, ellipse, polygon, url). This adds support for path() as a value as specified in https://drafts.csswg.org/css-shapes-1/#funcdef-path, for example: clip-path: path(oddeven, 'M 5 5 h 100 v 100 Z') would clip the element with a triangle.

Motivation

The path() function, as used in clip-path, allows specifying SVG-style paths for clipping. Without it, the user has to do one of the following: - create an additional SVG component and add a reference to it as the clip-path (cumbersome) - Use a polygon for the clip-path (doesn't support all path features, such as arcs).

Demo

Specification

Editor's draft

Status in Chromium

Blink>CSS


No active development (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • Shipped/Shipping
  • No signal
  • Shipped/Shipping
  • No signals

Owner

Last updated on 2020-10-25