From the course: SVG: Clipping, Masking, and Filters
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
feFlood
- [Instructor] The feFlood filter primitive quite literally floods the filter subregion with a color and opacity defined using flood-color and flood-opacity. You can see how that works by unchecking this filter URL, the filter up here in the file, and going down and taking a look at the filter declared. Here we have the feFlood filter primitive. Again, we have set x, y, width, and height for the filter primitive to control where it displays, and then we have these two attributes, flood-color, and flood-opacity. Flood-color is any CSS color, so you can use either declared names for CSS colors or you can use hex values for CSS colors, and flood-opacity is a number between 0 and one where 0 is completely transparent and one is completely solid. So right now, I've set the flood color to green and opacity one, meaning we should get a solid green color. Then I want to apply it to an element, so I'll start by applying it to the rectangle. That's what we've done up here. Save and go back in…
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.
Contents
-
-
-
-
-
A walkthrough of SVG filter primitives2m 11s
-
(Locked)
feImage4m 31s
-
(Locked)
feTile4m 15s
-
(Locked)
feFlood2m 29s
-
(Locked)
feBlend2m 52s
-
(Locked)
feGaussianBlur3m 21s
-
(Locked)
feMerge2m 51s
-
(Locked)
feOffset2m 54s
-
(Locked)
feMorphology4m 39s
-
(Locked)
feComposite4m 50s
-
(Locked)
feComponentTransfer9m 23s
-
(Locked)
feColorMatrix, part 13m 42s
-
(Locked)
feColorMatrix, part 24m 53s
-
(Locked)
feDiffuseLighting7m 53s
-
(Locked)
feSpecularLighting4m 19s
-
(Locked)
feTurbulence6m 47s
-
(Locked)
feDisplacementMap2m 40s
-
(Locked)
feConvolveMatrix5m 49s
-
-
-