From the course: SVG: Clipping, Masking, and Filters
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
The clipPath element
From the course: SVG: Clipping, Masking, and Filters
The clipPath element
- [Instructor] A clipPath is a standalone element added to an SVG element. The clipPath does not generate graphics of its own, but instead, act on any graphics passed to it. A clipPath starts with the clipPath element definition contained inside the defs element of an SVG. To be able to call this clipPath from a graphic element somewhere else, the clipPath element needs a unique ID. Inside the clipPath element, the actual clipPath is defined using standard SVG shapes. These are defined the exact same way you would define visible shapes and they are precisioned and sized within the same overall coordinate system of the SVG as visible shapes unless otherwise specified. Applying a clipPath to an element can be done in three different ways. Either sets the clip dash path attribute of an elements to point a URL reference at the clipPath ID, so clipPath equals URL and then the ID for the clipPath. Or set the style attribute of an element to clipPath colon and then the URL reference. Or use…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.