CSS clip-path property (for HTML)
CSS clip-path property (for HTML)
Method of defining the visible region of an HTML element using SVG or a shape definition.
Spec | http://www.w3.org/TR/css-masking-1/#the-clip-path |
---|---|
Status | W3C Candidate Recommendation |
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
57 | 62 (2) | ||||
56 | 61 (2) | TP (2,*) | 48 (2) | ||
16 | 55 | 60 (2) | 11 (2,*) | 47 (2) | |
11 | 15 | 54 | 59 (2) | 10.1 (2,*) | 46 (2) |
10 | 14 | 53 (1,3) | 58 (2) | 10 (2,*) | 45 (2) |
9 | 13 | 52 (1,3) | 57 (2) | 9.1 (2,*) | 44 (2) |
8 | 12 | 51 (1,3) | 56 (2) | 9 (2,*) | 43 (2) |
Show all | |||||
7 | 50 (1,3) | 55 (2) | 8 (2,*) | 42 (2) | |
6 | 49 (1,3) | 54 (2,*) | 7.1 (2,*) | 41 (2,*) | |
5.5 | 48 (1,3) | 53 (2,*) | 7 (2,*) | 40 (2,*) | |
47 (1,3) | 52 (2,*) | 6.1 | 39 (2,*) | ||
46 (1) | 51 (2,*) | 6 | 38 (2,*) | ||
45 (1) | 50 (2,*) | 5.1 | 37 (2,*) | ||
44 (1) | 49 (2,*) | 5 | 36 (2,*) | ||
43 (1) | 48 (2,*) | 4 | 35 (2,*) | ||
42 (1) | 47 (2,*) | 3.2 | 34 (2,*) | ||
41 (1) | 46 (2,*) | 3.1 | 33 (2,*) | ||
40 (1) | 45 (2,*) | 32 (2,*) | |||
39 (1) | 44 (2,*) | 31 (2,*) | |||
38 (1) | 43 (2,*) | 30 (2,*) | |||
37 (1) | 42 (2,*) | 29 (2,*) | |||
36 (1) | 41 (2,*) | 28 (2,*) | |||
35 (1) | 40 (2,*) | 27 (2,*) | |||
34 (1) | 39 (2,*) | 26 (2,*) | |||
33 (1) | 38 (2,*) | 25 (2,*) | |||
32 (1) | 37 (2,*) | 24 (2,*) | |||
31 (1) | 36 (2,*) | 23 (2,*) | |||
30 (1) | 35 (2,*) | 22 (2,*) | |||
29 (1) | 34 (2,*) | 21 (2,*) | |||
28 (1) | 33 (2,*) | 20 (2,*) | |||
27 (1) | 32 (2,*) | 19 (2,*) | |||
26 (1) | 31 (2,*) | 18 (2,*) | |||
25 (1) | 30 (2,*) | 17 (2,*) | |||
24 (1) | 29 (2,*) | 16 (2,*) | |||
23 (1) | 28 (2,*) | 15 (2,*) | |||
22 (1) | 27 (2,*) | 12.1 | |||
21 (1) | 26 (2,*) | 12 | |||
20 (1) | 25 (2,*) | 11.6 | |||
19 (1) | 24 (2,*) | 11.5 | |||
18 (1) | 23 | 11.1 | |||
17 (1) | 22 | 11 | |||
16 (1) | 21 | 10.6 | |||
15 (1) | 20 | 10.5 | |||
14 (1) | 19 | 10.0-10.1 | |||
13 (1) | 18 | 9.5-9.6 | |||
12 (1) | 17 | 9 | |||
11 (1) | 16 | ||||
10 (1) | 15 | ||||
9 (1) | 14 | ||||
8 (1) | 13 | ||||
7 (1) | 12 | ||||
6 (1) | 11 | ||||
5 (1) | 10 | ||||
4 (1) | 9 | ||||
3.6 (1) | 8 | ||||
3.5 (1) | 7 | ||||
3 | 6 | ||||
2 | 5 | ||||
4 |
iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser |
---|---|---|---|---|---|---|---|---|---|---|---|
11 (2,*) | |||||||||||
10.3 (2,*) | all | 56 (2) | 10 | 37 (2,*) | 59 (2) | 54 | 11 | 11.4 (2,*) | 5 (2,*) | 1.2 (2,*) | 7.12 (2) |
10.0-10.2 (2,*) | 4.4.3-4.4.4 (2,*) | 7 | 12.1 | 10 | 4 (2,*) | ||||||
9.3 (2,*) | 4.4 (2,*) | 12 | |||||||||
9.0-9.2 (2,*) | 4.2-4.3 | 11.5 | |||||||||
Show all | |||||||||||
8.1-8.4 (2,*) | 4.1 | 11.1 | |||||||||
8 (2,*) | 4 | 11 | |||||||||
7.0-7.1 (2,*) | 3 | 10 | |||||||||
6.0-6.1 | 2.3 | ||||||||||
5.0-5.1 | 2.2 | ||||||||||
4.2-4.3 | 2.1 | ||||||||||
4.0-4.1 | |||||||||||
3.2 |
Notes
Support refers to the clip-path
CSS property on HTML elements specifically. Support for clip-path
in SVG is supported in all browsers with basic SVG support.
Partial support refers to only supporting the
url()
syntax.Partial support refers to supporting shapes and the
url(#foo)
syntax for inline SVG, but not shapes in external SVGs.Supports shapes behind the
layout.css.clip-path-shapes.enabled
flag
- * Partial support with prefix.
Resources
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=css-clip-path