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.
feOffset
- [Morten] The feOffset filter primitive offsets the input graphic by the value defined in the dx and dy attributes. This is useful any time you need to move the output graphic relative to some other graphic you have in your SVG filter, for example, if you are creating a drop shadow. So right now you can see we've created this shadow by creating a sandwich of a blurred version of the rectangle, plus the solid version of the rectangle on top, but the shadow is uniform across the entire rectangle, making it look like the light source is directly above. If we want this to look like a true drop shadow, we need to shift the drop shadow either to the left, or to the right, and up or down so that it becomes a little offset from the original rectangle. That's exactly what we're gonna use feOffset for. FeOffset has two main attributes, dx and dy, this is a deviation in the x axis and the y axis, and this will take both positive and negative numbers. These numbers are relative to the top left…
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
-
-
-