Re: [css-masking] clip-path: path()

The spec that has already adopted `path(/*SVG path notation*/)` is the CSS
Motion Path module.  Wording here:
https://drafts.fxtf.org/motion-1/#funcdef-path

path() <https://drafts.fxtf.org/motion-1/#funcdef-path> = path([ <fill-rule>
> <http://dev.w3.org/csswg/css-shapes-1/#typedef-fill-rule> ,]? <string>
> <http://dev.w3.org/csswg/css-values-3/#string-value>)
> The <string> <http://dev.w3.org/csswg/css-values-3/#string-value> represents
> an SVG Path data string. The path data string must be conform to the
> grammar and parsing rules of SVG 1.1 [SVG11]
> <https://drafts.fxtf.org/motion-1/#biblio-svg11>. The initial position is
> defined by the first “move to” argument in the path string. For the initial
> direction follow SVG 1.1 [SVG11]
> <https://drafts.fxtf.org/motion-1/#biblio-svg11>.
> <fill-rule> <http://dev.w3.org/csswg/css-shapes-1/#typedef-fill-rule> -
> The filling rule used to determine the interior of the path. See fill-rule
> <https://svgwg.org/svg2-draft/painting.html#FillRuleProperty> property in
> SVG for details. Possible values are nonzero
> <http://dev.w3.org/fxtf/masking/#valuedef-nonzero> or evenodd
> <http://dev.w3.org/fxtf/masking/#valuedef-evenodd>. Default value when
> omitted is nonzero <http://dev.w3.org/fxtf/masking/#valuedef-nonzero>.


I know many authors would be happy to see this adopted for clip-path and
shape-outside/-inside.

Amelia

On 15 October 2015 at 15:31, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> On Wed, Oct 14, 2015 at 9:10 PM, Simon Fraser <smfr@me.com> wrote:
> > I would like the clip-path: property[1] to actually support bezier paths
> (as
> > a naive interpretation of the property name would have you expect).
> >
> > The syntax would be a path function with an SVG-style path as a string,
> for
> > example:
> >
> > clip-path: path("M10 10 H 90 V 90 H 10 L 10 10”);
> >
> > The units wold be interpreted as CSS pixel units, relative to the origin
> of
> > the geometry box. Paths would be animatable, following the same rules as
> > SVG.
> >
> > I have a work-in-progress patch to add support for this to WebKit[2].
> >
> > Simon
> >
> > [1] https://drafts.fxtf.org/masking/#the-clip-path
> > [2] https://bugs.webkit.org/show_bug.cgi?id=149996
>
> +1.  We've discussed this already (maybe for other properties; shapes
> or motion-path, probably?), and path(<string>) is the simplest way to
> get arbitrary paths into CSS.
>
> ~TJ
>
>