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.
Filter regions and sub-regions
From the course: SVG: Clipping, Masking, and Filters
Filter regions and sub-regions
- [Instructor] To work effectively with SVG filters you need to be aware of the filter regions and sub regions. This is best illustrated with an example. In this SVG there is a black rectangle inspecting it with the browser tools you'll see the stroke of this rectangle aligns with the outer edges of the space that is assigned using X, Y, width, and height attributes in direct element, which is exactly what you'd expect. Behind this black outlined rectangle there is a green rectangle, which appears to be a separate SVG element, but looking at the code you'll see it's actually an feFlood filter primitive. You'll also notice this feFlood primitive has it's X and Y values set to zero and width and height set to 100%. So you'd think the green rectangle would line up with the original graphic, but it's plain to see it doesn't. This may look like a bug, but it's actually a feature. Let me explain. What we see here is feFlood filter primitive flooding the filter effect region which by default…
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.