feOffset (SVG Filter Effect)

By mbystedt on Feb 27, 2014, 9:50:53 PM

The feOffset filter effect provides the plumbing to offset the result of another filter effect. As a result, the 'in' attribute that is common to all filter effects will be used with this effect.

Offsets the 'in' filter to along the x-axis (default: '0')
Offsets the 'in' filter to along the y-axis (default: '0')
  <filter id="dropShadow">
    <!-- Blur the source alpha to make a nice shadow. -->
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
    <!-- Move the shadow over a bit. -->
    <feOffset in="blur" dx="3" dy="3" result="offsetBlur"/>
    <!-- Put everything together. Blur then graphic. -->
      <feMergeNode in="offsetBlur"/>
      <feMergeNode in="SourceGraphic"/>
<text x="320" y="35" text-anchor="middle" fill="green" stroke="black" 
  font-size="40" filter="url(#dropShadow)">
  Look at my beautiful shadow.</text>
Example 1. A drop shadow. See the use of feOffset to move the shadow over. (Download)

See: Filter Effect Common Attributes

Live Demo