Ich möchte einen Schlagschattenfilter über CSS auf ein bestimmtes Element / einen bestimmten Pfad in einer inline platzierten SVG anwenden. nicht muss die gesamte Grafik beschattet werden, nur ein Element darin.

.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) );
}

  <svg height="150" width="150">
    <g>
<path d="M0,0 C-72,132 -72,-26 100,100"></path>
    </g>
    <g class="shadow" >
    <circle class="shadow" cx="100" cy="100" r="20"></circle>
    </g>
  </svg>

Wie Sie oben sehen können, versuche ich, einen Schlagschatten auf das rote Kreiselement der SVG anzuwenden, aber es funktioniert nicht.

ch habe keine spezifischen Informationen zu diesem Thema gefundenur wenige Kommentare In anderen SVG-bezogenen Fragen heißt es einfach, dass es nicht für einzelne SVG-Elemente funktioniert, aber ohne viele Erklärungen.

AKTUALISIERE

Wie von @ hervorgehob@ azeós in den Kommentaren wird mit Firefox (Version 43.0.2) korrekt gerendert, daher handelt es sich um ein Chrome-spezifisches Problem. Gibt es überhaupt eine Möglichkeit, diesen Crossbrowser zu erstellen, ohne den in den Kommentaren vorgeschlagenen SVG-Code auszuprobieren?