title: How to apply drop-shadow filter via CSS to SVG specific element/path
body: <p>I'd like to apply a drop-shadow filter to a specific element/path inside an inline placed SVG via CSS, I <strong>don't</strong> need the whole graphic to be shadowed, just an element inside it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.shadow {
    fill: red;
    
    -webkit-filter: 
      drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
            filter: 
      drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;svg height="150" width="150"&gt;
      &lt;g&gt;
  &lt;path d="M0,0 C-72,132 -72,-26 100,100"&gt;&lt;/path&gt;
      &lt;/g&gt;
      &lt;g class="shadow" &gt;
      &lt;circle class="shadow" cx="100" cy="100" r="20"&gt;&lt;/circle&gt;
      &lt;/g&gt;
    &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see above, I'm trying to apply a drop-shadow to the red circle element of the SVG, but it's not working.</p>
  
  <p>Searching around I haven't found any specific info on this, <a href="https://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3#comment54428619_13624469">only few comments</a> in other SVG related questions simply stating that it doesn't work on single SVG elements, but without much explanations.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>As pointed out by <a href="https://stackoverflow.com/questions/34460182/how-to-apply-drop-shadow-filter-via-css-to-svg-specific-element-path#comment56662795_34460182">@azeós</a> in the comments, it is rendering correctly with Firefox (v. 43.0.2) so it's a Chrome specific issue. Is there anyway to make this crossbrowser without fiddling out with the SVG code as suggested in the comments?</p>