Attributes
Vachmi
The <feOffset> 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.
Attribute
Description
in
Identifies the input for the filter primitve
dx
This attribute indicates a shift along the x-axis on the position of an element or its content.
dy
This attribute indicates a shift along the y-axis on the position of an element or its content.
Here is the SVG code to draw this filter.
Image with feOffset filter
<svg id='feOffset1' stroke='#0E1A27' stroke-width='1' xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 100 100'>
<filter id="filter1" x="0" y="0" width="100" height="200">
<feOffset in="SourceGraphic" dx="30" dy="30"/>
</filter>
<rect x="10" y="10" width="50" height="50" fill="green"/>
<rect x="10" y="10" width="50" height="50" fill="red" filter="url(#filter1)"/>
</svg>
<filter id="filter1" x="0" y="0" width="100" height="200">
<feOffset in="SourceGraphic" dx="30" dy="30"/>
</filter>
<rect x="10" y="10" width="50" height="50" fill="green"/>
<rect x="10" y="10" width="50" height="50" fill="red" filter="url(#filter1)"/>
</svg>