Я хотел бы применить фильтр отбрасывания тени к определенному элементу / пути внутри встроенного SVG через CSS, яне нужно затенять весь график, просто элемент внутри него.

.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>

Как вы можете видеть выше, я пытаюсь нанести тень на элемент красного круга SVG, но он не работает.

Осматривая вокруг, я не нашел никакой конкретной информации по этому поводу,только несколько комментариев в других вопросах, связанных с SVG, просто утверждая, что он не работает с отдельными элементами SVG, но без особых пояснений.

ОБНОВИТЬ

Как указано@ azeós в комментариях он корректно рендерится с помощью Firefox (v. 43.0.2), так что это особая проблема Chrome. Есть ли способ сделать этот кроссбраузер без использования SVG-кода, как это предлагается в комментариях?