There are several CSS graphics-related properties that provide the bulk of support for Clipping, Masking, Filters and whatnot. The purpose of this repo is to hopefully provide some insight into what the current state of affairs is with various browser implementations.
The 'Apply To' column below distinguishes whether we're talking about applying the feature to HTML or SVG graphic components. If you apply a feature to an entire embedded SVG graph, that falls under the HTML category. If however, you're talking about applying the feature to a subgraph within the SVG, that falls into the SVG category.
For each browser column, a 'No' indicates the feature is currently unsupported. Otherwise, I indicate whether the feature is currently vendor-prefixed or not.
I don't have much information at this point on Opera, so have decided to leave it out for now. If you want, go ahead and fill it out and do a pull request.
In fact, if any of this information is out of date or incomplete, please update and do a pull request.
| Feature | Apply To | Safari | Chrome | Firefox | IE | Comments |
|---|---|---|---|---|---|---|
| clip-path with basic shapes | HTML | -webkit-clip-path | -webkit-clip-path | No | No | |
| SVG | -webkit-clip-path | -webkit-clip-path | No | No | ||
| clip-path with SVG path | HTML | -webkit-clip-path | -webkit-clip-path | clip-path | No | |
| SVG | clip-path | clip-path | clip-path | clip-path | ||
| mask-image | HTML | -webkit-mask-image | -webkit-mask-image | No | No | Uses alpha masking by default |
| SVG | No | No | No | No | ||
| mask-border-image | HTML | -webkit-mask-box-image | -webkit-mask-box-image | No | No | |
| SVG | No | No | No | No | ||
| mask | HTML | No | No | mask | No | |
| SVG | mask | mask | mask | mask | Uses luminance masking by default | |
| SVG Filter | HTML | -webkit-filter | -webkit-filter | filter | No | |
| SVG | filter | filter | filter | filter | ||
| regions | HTML | -webkit-flow-into / -webit-flow-from | No | No | Older support in IE with -ms-flow-into and -ms-flow-from. flow-into works differently, but flow-from is mostly the same. | Chrome dropped support for regions |