SVG <feOffset> Filter

Last Updated:

What is <feOffset> Filter?

The <feOffset> SVG filter primitive allows to offset the input image. The input image as a whole is offset by the values specified in the dx and dy attributes.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg rect{ stroke:red; stroke-width:3; fill:#339933; } </style> </head> <body> <svg height="120" width="120"> <defs> <filter id="point1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <feBlend in="SourceGraphic" in2="offOut" mode="normal" /> </filter> </defs> <rect width="90" height="90" filter="url(#point1)" /> </svg> </body> </html>

Attributes Value

AttributeExplanation
in Specifies the input for the given filter primitive.
dx Specifies a shift along the x-axis on the position of an element or its content.
dy Specifies a shift along the y-axis on the position of an element or its content.

Share this Page

Meet the Author