title: SVG element with background image and background color and drop shadow
body: <p>I'm using <a href="https://stackoverflow.com/a/6094674/517193">this answer</a> to apply a drop shadow on a SVG element like a circle. I have a <code>fill</code> attribute on my element to apply a background color on it, and now I'd like to combine all that with a background image on the circle.</p>
  
  <p>I've tried using a <code>&lt;pattern&gt;</code>but I can only have the background-image, or adding <code>&lt;feImage&gt;</code> to my filter drop shadow but the filter doesn't work anymore.</p>
  
  <p>Basically, what should I add to this code knowing my image can be found in /public/images/... :</p>
  
  <pre><code>&lt;filter id="dropshadow" width="130%" height="130%"&gt;
    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="3"/&gt;
    &lt;feOffset dx="0" dy="4" result="offsetblur"/&gt;
      &lt;feComponentTransfer&gt;
      &lt;feFuncA type="linear" slope="0.1"/&gt;
    &lt;/feComponentTransfer&gt;
    &lt;feMerge&gt; 
      &lt;feMergeNode/&gt;
      &lt;feMergeNode in="SourceGraphic"/&gt;
    &lt;/feMerge&gt;
  &lt;/filter&gt;
  &lt;circle cx="50%" cy="50%" r="49%" filter="url(#dropshadow)" fill="#f8f8f8" stroke="#e7e7e7" stroke-width="1px"/&gt;
  </code></pre>