YouTip

## `` `` is an element in SVG filters used to create an offset effect on images, which can be used to generate shadows, outlines, and other visual effects. It works by shifting each pixel of the input image by a specified distance along the horizontal and vertical directions, then outputting the resulting image as the filter effect. ### Basic Syntax * The `dx` attribute defines the horizontal offset of the shadow. * The `dy` attribute defines the vertical offset of the shadow. The following code defines an offset filter and applies it to a red-filled rectangle, giving the rectangle an offset shadow effect with horizontal and vertical offsets of 5 pixels each. ## Example ## `` SVG shadow effects can be achieved using the `` element, which adds shadow effects to SVG graphical elements, making them appear more three-dimensional and realistic. ### Basic Syntax * The `dx` attribute defines the horizontal offset of the shadow. * The `dy` attribute defines the vertical offset of the shadow. * The `stdDeviation` attribute defines the blur radius of the shadow, typically used to control the degree of shadow blurring. * The `flood-color` attribute defines the color of the shadow; the default is black. * The `flood-opacity` attribute defines the opacity of the shadow; the default is 1 (fully opaque). The following code defines a shadow filter and applies it to a red-filled rectangle, giving the rectangle a gray shadow effect with horizontal and vertical offsets of 5 pixels each, a blur radius of 5 pixels, a gray shadow color, and an opacity of 0.5. ## Example ### Example 1 The `` element is used to create shadow effects. The idea is to take an SVG graphic (an image or element) and shift it slightly in the xy-plane. In the first example, a rectangle is offset (using ``) and then blended on top of the original (using ``):  Below is the SVG code: ## Example [Try it yourself »](#) Click to view: (#). **Code explanation:** * The `id` attribute of the `` element defines a unique name for the filter. * The `filter` attribute of the `` element links the element to the "f1" filter. * * * ## Example 2 Now, the offset image can be blurred (using ``):  Below is the SVG code: ## Example [Try it yourself »](#) Click to view: (#). **Code explanation:** * The `stdDeviation` attribute of the `` element defines the amount of blur. ### Example 3 Now, create a black shadow:  Below is the SVG code: ## Example [Try it yourself »](#) Click to view: (#). **Code explanation:** * The `in` attribute of the `` element is changed to `"SourceAlpha"` to use the alpha channel for the shadow instead of the entire RGBA pixel. ### Example 4 Now, add color to the shadow:  Below is the SVG code: ## Example [Try it yourself »](#) Click to view: (#). **Code explanation:** * The `` filter is used to transform the offset image to make its color closer to black. The three '0.2' values in the matrix are multiplied with the red, green, and blue channels respectively. Reducing these values brings the color toward black (black corresponds to 0). ### Notes * The `` element can be combined with other filter effects, such as blur and color matrix. * The offset values `dx` and `dy` for the offset effect can be positive (indicating rightward or downward offset) or negative (indicating leftward or upward offset). * The `` element is commonly used to create shadow effects; combining it with other filter effects enables more complex visual results. By using the `` element, you can create offset effects for SVG graphical elements, giving them a more vivid and three-dimensional appearance.