apike.ca
apike.ca

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.

Attribute
Comments
dx
Offsets the 'in' filter to along the x-axis (default: '0')
dy
Offsets the 'in' filter to along the y-axis (default: '0')
 
<defs>
  <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. -->
    <feMerge>
      <feMergeNode in="offsetBlur"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</defs>
<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