title: SVG filter parameters
body: <p>Let's say I have an svg filter that applies a drop shadow to an element:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;filter id="dropShadow"&gt;
    &lt;feFlood result="flood" flood-color="#000" flood-opacity="0.6" /&gt;
    &lt;feComposite in="flood" in2="SourceGraphic" operator="in" result="mask" /&gt;
    &lt;feGaussianBlur in="mask" stdDeviation="0.3" result="shadow" /&gt;
    &lt;feOffset in="shadow" dx="-1" dy="1" result="drop-shadow" /&gt;
    &lt;feMerge&gt;
      &lt;feMergeNode in="drop-shadow"/&gt;
      &lt;feMergeNode in="SourceGraphic"/&gt;
    &lt;/feMerge&gt;
  &lt;/filter&gt;
  &lt;circle r="40" cx="50" cy="50" fill="#F00" filter="url(#dropShadow)" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works fine and dandy - but what happens when I want to have different types of drop shadows in the same file? I end up with 5 copies of the same filter with only the color, opacity, offset and blur changed.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;filter id="dropShadow"&gt;
    &lt;feFlood result="flood" flood-color="#000" flood-opacity="0.6" /&gt;
    &lt;feComposite in="flood" in2="SourceGraphic" operator="in" result="mask" /&gt;
    &lt;feGaussianBlur in="mask" stdDeviation="0.3" result="shadow" /&gt;
    &lt;feOffset in="shadow" dx="-1" dy="1" result="drop-shadow" /&gt;
    &lt;feMerge&gt;
      &lt;feMergeNode in="drop-shadow"/&gt;
      &lt;feMergeNode in="SourceGraphic"/&gt;
    &lt;/feMerge&gt;
  &lt;/filter&gt;
  &lt;filter id="dropShadow2"&gt;
    &lt;feFlood result="flood" flood-color="#0F0" flood-opacity="1" /&gt;
    &lt;feComposite in="flood" in2="SourceGraphic" operator="in" result="mask" /&gt;
    &lt;feGaussianBlur in="mask" stdDeviation="1" result="shadow" /&gt;
    &lt;feOffset in="shadow" dx="-1" dy="1" result="drop-shadow" /&gt;
    &lt;feMerge&gt;
      &lt;feMergeNode in="drop-shadow"/&gt;
      &lt;feMergeNode in="SourceGraphic"/&gt;
    &lt;/feMerge&gt;
  &lt;/filter&gt;
  &lt;filter id="dropShadow3"&gt;
    &lt;feFlood result="flood" flood-color="#000" flood-opacity="0.6" /&gt;
    &lt;feComposite in="flood" in2="SourceGraphic" operator="in" result="mask" /&gt;
    &lt;feGaussianBlur in="mask" stdDeviation="0.1" result="shadow" /&gt;
    &lt;feOffset in="shadow" dx="2" dy="2" result="drop-shadow" /&gt;
    &lt;feMerge&gt;
      &lt;feMergeNode in="drop-shadow"/&gt;
      &lt;feMergeNode in="SourceGraphic"/&gt;
    &lt;/feMerge&gt;
  &lt;/filter&gt;
  &lt;filter id="dropShadow4"&gt;
    &lt;feFlood result="flood" flood-color="#F00" flood-opacity="0.6" /&gt;
    &lt;feComposite in="flood" in2="SourceGraphic" operator="in" result="mask" /&gt;
    &lt;feGaussianBlur in="mask" stdDeviation="1" result="shadow" /&gt;
    &lt;feOffset in="shadow" dx="0" dy="0" result="drop-shadow" /&gt;
    &lt;feMerge&gt;
      &lt;feMergeNode in="drop-shadow"/&gt;
      &lt;feMergeNode in="SourceGraphic"/&gt;
    &lt;/feMerge&gt;
  &lt;/filter&gt;
  &lt;circle r="10" cx="30" cy="30" fill="#F00" filter="url(#dropShadow)" /&gt;
  &lt;circle r="10" cx="30" cy="70" fill="#F00" filter="url(#dropShadow2)" /&gt;
  &lt;circle r="10" cx="70" cy="70" fill="#F00" filter="url(#dropShadow3)" /&gt;
  &lt;circle r="10" cx="70" cy="30" fill="#F00" filter="url(#dropShadow4)" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Not dry at all...</p>
  
  <p>Is there any way to pass parameters to filters for code reuse?</p>