« SVG Attribute reference home
The clip-path attribute binds the element it is applied to with a given <clipPath> element
As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet
Usage context
| Categories | Presentation attribute |
|---|---|
| Value | <FuncIRI> | none | inherit |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |
- <funciri>
- A reference to another graphical object within the same SVG document fragment which will be used as the clipping path. the syntax for this reference is the same as the
css uri. If the reference is not valid (e.g it points to an object that doesn't exist or the object is not a<clipPath>element) theclip-pathattribute or property must be treated as if it hadn't been specified.
Example
clip-path as an attribute
| Source code | Output result |
|---|---|
Unable to find file clip-path-1.svg |
Unable to find file clip-path-1.svg |
clip-path as a CSS property
| Source code | Output result |
|---|---|
Unable to find file clip-path-2.svg |
Unable to find file clip-path-2.svg |
Elements
The following elements can use the clip-path attribute