[css-masking] Suggestion: Specify clipPathUnits for CSS clip-path: path

[noamr]

Currently when using CSS clip-path path(...) as a value, it's assumed to be in pixel coordinates rather than in relative coordinates. In SVG, that's handled by clipPathUnits attribute of clipPath. However, there is no current way to specify that for CSS clip-path: path(...). This creates a situation where many scalable paths require using an SVG ref instead of the path syntax.

[stof]

This would make it a lot easier to use clip-path: path() in a responsive context

[noamr]

I think this is solved differently now with https://drafts.csswg.org/css-shapes-2/#shape-function

[stof]

This links looks weird. It shows an Apache index page instead of a spec.

[SebastianZ]

The server is currently down. See #6725.

Sebastian

[yisibl]

I think this is solved differently now with https://drafts.csswg.org/css-shapes-2/#shape-function

@noamr Can you describe how shape() does this? I don't see some description or example in the specification.

This is a problem that has plagued many CSS authors for a long time.

• https://jamesmcgrath.net/scaling-svg-clippath/
• https://css-tricks.com/unfortunately-clip-path-path-is-still-a-no-go/
• https://stackoverflow.com/questions/29495919/how-to-apply-clippath-to-a-div-with-the-clippath-position-being-relative-to-the
• https://stackoverflow.com/questions/31210466/convert-svg-path-data-to-0-1-range-to-use-as-clippath-with-objectboundingbox
• https://stackoverflow.com/questions/53618192/create-responsive-svg-clip-path-making-svg-path-responsive

[noamr]

I think this is solved differently now with https://drafts.csswg.org/css-shapes-2/#shape-function

@noamr Can you describe how shape() does this? I don't see some description or example in the specification.

This is a problem that has plagued many CSS authors for a long time.

• https://jamesmcgrath.net/scaling-svg-clippath/
• https://css-tricks.com/unfortunately-clip-path-path-is-still-a-no-go/
• https://stackoverflow.com/questions/29495919/how-to-apply-clippath-to-a-div-with-the-clippath-position-being-relative-to-the
• https://stackoverflow.com/questions/31210466/convert-svg-path-data-to-0-1-range-to-use-as-clippath-with-objectboundingbox
• https://stackoverflow.com/questions/53618192/create-responsive-svg-clip-path-making-svg-path-responsive

shape() is exactly a responsive path(), where you can specify length/percentage for each point.
You're right that we need more examples in the spec! I will add some. Stay tuned!

In the meantime you can refer to the tests for examples: https://github.com/web-platform-tests/wpt/blob/9726c469a36bdbb1f420c170cd28493fe4442eb1/css/css-masking/parsing/clip-path-shape-parsing.html#L14

[yisibl]

@noamr Good news!

I'm writing a tool to convert SVG path to CSS shape(). I have some questions:

SVGs exported by design tools are usually absolute path, do we have to convert them to relative path before using shape() in order to be responsive?

e.g.

M269 0l190.212 78.788L538 269l-78.788 190.212L269 538 78.788 459.212 0 269 78.788 78.788z

[noamr]

@noamr Good news!

I'm writing a tool to convert SVG path to CSS shape().

Yay! Do share.

SVGs exported by design tools are usually absolute path, do we have to convert them to relative path before using shape() in order to be responsive?

e.g.

M269 0l190.212 78.788L538 269l-78.788 190.212L269 538 78.788 459.212 0 269 78.788 78.788z

It depends on what you want to achieve. If you want the shape to merely be a scalable version of the SVG path, you can pick a view-box for the path and convert everything to %. If you want parts to be in %, other parts to be in px and other parts to be a calc(80% - 10vh) or what not you'd have to make your own decisions :)