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

#css #css3 #svg #css_animation

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


   
  
  
    
  
   
    
     
  


#Projektablauf path {
cursor: pointer;
transition: all 0.3s ease;
}
#Projektablauf path:hover {    
filter: url(#dropshadow);  
}


Но как сделать появление тени плавным? transition: all 0.3s ease; не срабатывает.
    

Ответы

Ответ 1

Можно продублировать ваши 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;
}