Solución:
Actualizado 2020-04: Hice algunos experimentos sobre este tema porque tampoco pude encontrar ninguna información al respecto y los resultados son bastante inconsistentes.
Las sombras paralelas TL; DR: SVG son muy inconsistentes, pero las sombras paralelas HTML funcionan de manera confiable (fuera de IE11). Si desea sombras paralelas SVG, tendrá que usar un polyfill o simplemente hacer la sombra paralela dentro del SVG.
Experimento de Codepen: http://codepen.io/staypuftman/pen/GoNoMq
Chrome 81 + Canary 83:
Ni Chrome ni Edge Canary respetan filter o -webkit-filter correctamente en el contexto de una sombra paralela de un objeto SVG, pero funcionan en una simple div.
Firefox 75 + Firefox 53 (pre-cuántico):
Se ve bastante bien para objetos SVG y HTML.
Safari 13+
Safari tuvo brevemente sombras en versiones anteriores, pero las ha eliminado nuevamente.
Safari 10.1 – 11
Safari ha solucionado este problema en la serie 10.1 (y tal vez en la 10.0).
Safari 9.x
SVG CSS drophadow no se muestra y el div la sombra tiene menos opacidad por alguna razón
Edge (versión Chromium)
No hay sombras paralelas SVG, pero las HTML funcionan bien.
IE11
Nada.
Puede aplicar una sombra de forma selectiva haciendo una selección de color en el objeto que desea sombrear, creando una sombra y luego fusionándola debajo del gráfico original. Pero debe hacerlo a través de la trampilla del filtro SVG en los filtros CSS, que no funciona en IE. (Entonces … hacky, pero posible)
La especificación está aquí: w3.org/TR/SVG11/filters.html#feColorMatrixElement
El juguete de demostración está aquí:
https://beta.observablehq.com/@gitmullany/filter-effects-using-svg-color-matrices
Esa matriz duplica la opacidad de todos los valores rojos, pone a cero la opacidad de todo lo demás y luego resta 1. El efecto es dejar solo las cosas al 100% de opacidad que son rgb (255,0,0)
#mySVG {
filter: url(#selective-shadow);
}
.shadow {
fill: red;
}<svg>
<defs>
<filter id="selective-shadow">
<feColorMatrix type="matrix" values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
2 0 0 0 -1"/>
<feGaussianBlur stdDeviation="3"/>
<feOffset dy="2" dx="2"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
</svg>
<svg height="150" width="150" id="mySVG">
<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>