Añade sombras a elementos SVG usando CSS

Añade en tu archivo HTML principal (o en el componente padre donde se mostrará la sombra) el siguiente segmento:

<svg> <filter id="dropshadow" height="130%"> <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur> <!-- stdDeviation is how much to blur --> <feOffset dx="2" dy="2" result="offsetblur"></feOffset> <!-- how much to offset --> <feComponentTransfer> <feFuncA type="linear" slope="0.5"></feFuncA> <!-- slope is the opacity of the shadow --> </feComponentTransfer> <feMerge> <feMergeNode></feMergeNode> <!-- this contains the offset blurred image --> <feMergeNode in="SourceGraphic"></feMergeNode> <!-- this contains the element that the filter is applied to --> </feMerge> </filter> </svg>

Tener en cuenta que existe una etiqueta filter con el atributo id, que mas adelante se usará para aplicar el filtro CSS.

A continuación, se usará CSS para aplicar el filtro SVG en la etiqueta path cuando se pase el cursor sobre el mismo, es decir, se aplica el filtro SVG desde CSS cuando es activado el evento hover:

path {
  stroke-width: 1px;

  &:hover {
    cursor: pointer;
    stroke-width: 2px;
    filter: url(#dropshadow);
  }
}

y ¿donde está la etiqueta path? Puedes añadir el siguiente segmento:

<svg height="400" width="450">
    <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
</svg>


Nota: Este ejemplo es aplicable a otros elementos SVG.

Mas información en: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur