Анимированное появление тени у path svg

Реализовала появление тени при наведении у path svg

#Projektablauf path { cursor: pointer; transition: all 0.3s ease; } #Projektablauf path:hover { filter: url(#dropshadow); }
Но как сделать появление тени плавным? transition: all 0.3s ease; не срабатывает.

Ответ

Можно продублировать ваши path, по умолчанию применить к ним ваш фильтр, поставить opacity:0 и отображать их при наведении на path без фильтра:
#Projektablauf path { cursor: pointer; transition: all 0.3s ease; } #Projektablauf path.hover { filter: url(#dropshadow); opacity: 0; pointer-events: none; } #Projektablauf path:hover+path.hover { opacity: 1; }
Ну, или отобраражать их при наведение на них самих:
#Projektablauf path { cursor: pointer; transition: all 0.3s ease; } #Projektablauf path.hover { filter: url(#dropshadow); opacity: 0; } #Projektablauf path.hover:hover { opacity: 1; }