The path() & url() functions for clip-path property doesn't work in perspective

Ignition Early Access
1

Hi,
For the clip-path CSS3 property all available syntaxs like circle(40%), polygon(50% 0, 100% 50%, 50% 100%, 0 50%), etc … are working except path() and url() functions.
I try those but nothing is happening:

clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z')
cli-path: url(/system/images/clipPath2.svg)

It seems a bug to me. Is anyone else able to use those?

2

What component are you trying to style?

(also fix cli-path to clip-path).

3

I’m using in image or label or container which work for the other option.
The actual code is clip-path :grinning:

4

Okay, here is what I found out about clip-path: path(<path>). It is not supported in all browsers (I would say most browsers). I was able to see the clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z') CSS property on a label with a background color in Firefox version 88.0.

Here are the articles I’m reading:

I played around with the URL path as well but didn’t get it to work either.

If you do find anything new out, let me know!

5

Interesting, I almost test it in all modern browsers and it works every even (pure CSS HTML code of course not perspective).
Even there are tons of tutorial about it.