title: SVG Mask and Drop Shadow
body: <p>I am trying to add a drop shadow and mask to SVG text, I have the mask working but the drop shadow isn't being applied to the text.</p>
  
  <p>could i get some help as to how to achieve this.</p>
  
  <pre><code>&lt;svg version="1.1" id="home" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800"  xml:space="preserve"&gt;
  &lt;defs&gt;
      &lt;!-- FILTER DROP SHADOW --&gt; 
   &lt;filter id="dropShadow"&gt;
    &lt;feDropShadow dx="0" dy="2" stdDeviation="15" result="shadow"/&gt;
     &lt;feComposite in2="mask" in="shadow" operator="in" result="comp" /&gt;
    &lt;feMerge result="merge"&gt;
      &lt;feMergeNode in="SourceGraphic" /&gt;
      &lt;feMergeNode in="comp" /&gt;
    &lt;/feMerge&gt; 
  &lt;/filter&gt;
  &lt;/defs&gt;
  
  &lt;!-- MASKING TEXT --&gt;
  &lt;mask maskUnits="userSpaceOnUse" x="-273" y="-353.2" width="3500" height="1500" id="text-mask" result="mask"&gt;
      &lt;g id="svg-texts" &gt;
          &lt;text transform="matrix(1 0 0 1 62.9893 260)" style="fill:#FFFFFF; font-family:'Source Sans Pro';font-weight: 900; font-size:250px;"&gt;TEXT HERE&lt;/text&gt;
          &lt;text transform="matrix(1 0 0 1 62.9893 500)" style="fill:#FFFFFF; font-family:'Source Sans Pro';font-weight: 900; font-size:250px;"&gt;TEXT HERE&lt;/text&gt;
          &lt;text transform="matrix(1 0 0 1 62.9893 750)" style="fill:#FFFFFF; font-family:'Source Sans Pro';font-weight: 900; font-size:250px;"&gt;TEXT HERE&lt;/text&gt;
      &lt;/g&gt;
  &lt;/mask&gt;
  
  &lt;!-- BUBBLES BG --&gt;
  &lt;g id="circles" mask="url(#text-mask)"&gt;
  &lt;circle cx="50%" cy="50%" r="345" fill="red" /&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/james182/pen/KKpdVZR" rel="nofollow noreferrer">CodePen Example</a></p>