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

273

02 августа 2017, 20:37

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

<filter xmlns="http://www.w3.org/2000/svg" id="dropshadow" >
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
  <feOffset dx="2" dy="2" result="offsetblur"  />
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.5"/>
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/> 
  </feMerge>
</filter>
#Projektablauf path {
cursor: pointer;
transition: all 0.3s ease;
}
#Projektablauf path:hover {    
filter: url(#dropshadow);  
}

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

Answer 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; 
}

<?xml version="1.0" encoding="UTF-8"?> 
<svg width="562px" height="248px" viewBox="0 0 562 248" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  
     
  <filter xmlns="http://www.w3.org/2000/svg" id="dropshadow" > 
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>  
      <feOffset dx="2" dy="2" result="offsetblur"  /> 
      <feComponentTransfer> 
        <feFuncA type="linear" slope="0.5"/> 
      </feComponentTransfer> 
      <feMerge>  
        <feMergeNode/> 
        <feMergeNode in="SourceGraphic"/>  
      </feMerge> 
    </filter> 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
        <g id="Projektablauf" transform="translate(-118.000000, -1351.000000)"> 
            <g id="Ablauf" transform="translate(119.000000, 1144.000000)"> 
                <g id="2.-Realisation" transform="translate(0.000000, 177.000000)"> 
                    <g id="Graph---Planung"> 
                        <g id="betrieb" transform="translate(193.000000, 150.000000)"> 
                            <path d="M143.544814,22.0253781 C134.476876,33.4488689 120.445343,40.788749 104.681768,40.788749 C86.4574984,40.788749 70.5442109,30.9842795 61.9492997,16.3932762 L24.9035042,17.3743572 L6.42520156,47.6729575 C25.9833429,81.4885507 62.6604324,104.257077 104.681768,104.257077 C144.091104,104.257077 178.79486,84.2273356 199.089617,53.8447332 L162.671339,53.0522607 L143.544814,22.0253781 Z" id="Fill-6" fill="#E1E1E1" transform="translate(102.757409, 60.325177) rotate(-10.000000) translate(-102.757409, -60.325177) "></path> 
                            <path class="hover" d="M143.544814,22.0253781 C134.476876,33.4488689 120.445343,40.788749 104.681768,40.788749 C86.4574984,40.788749 70.5442109,30.9842795 61.9492997,16.3932762 L24.9035042,17.3743572 L6.42520156,47.6729575 C25.9833429,81.4885507 62.6604324,104.257077 104.681768,104.257077 C144.091104,104.257077 178.79486,84.2273356 199.089617,53.8447332 L162.671339,53.0522607 L143.544814,22.0253781 Z" id="Fill-6" fill="#E1E1E1" transform="translate(102.757409, 60.325177) rotate(-10.000000) translate(-102.757409, -60.325177) "></path> 
                            <polyline id="Path-3" stroke="#262B2F" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" transform="translate(239.815335, 114.979579) rotate(-60.000000) translate(-239.815335, -114.979579) " points="186.147524 -0.895496313 186.147524 44.9439025 293.483147 230.854655"></polyline> 
                        </g> 
                        <g id="realisation" transform="translate(272.000000, 0.000000)"> 
                            <polyline id="Path-3" stroke="#262B2F" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" transform="translate(197.361080, 71.409679) scale(1, -1) rotate(-60.000000) translate(-197.361080, -71.409679) " points="162.426848 -10.8780845 162.426848 34.9613144 232.295312 153.697442"></polyline> 
                            <path d="M14.3329415,84.5989538 C38.7973414,87.5929149 57.7430963,108.329542 57.7430963,133.484204 C57.7430963,142.545334 55.2744384,151.028752 50.984548,158.323461 L69.7909433,188.832067 L106.492719,189.630879 C116.052796,173.099111 121.520475,153.926824 121.520475,133.484204 C121.520475,73.3759586 74.2488617,24.2608917 14.684128,20.9317148 L31.9567699,52.2629068 L14.3329415,84.5989538 Z" id="Fill-3" fill="#929597" transform="translate(67.926708, 105.281297) rotate(-10.000000) translate(-67.926708, -105.281297) "></path> 
                            <path class="hover" d="M14.3329415,84.5989538 C38.7973414,87.5929149 57.7430963,108.329542 57.7430963,133.484204 C57.7430963,142.545334 55.2744384,151.028752 50.984548,158.323461 L69.7909433,188.832067 L106.492719,189.630879 C116.052796,173.099111 121.520475,153.926824 121.520475,133.484204 C121.520475,73.3759586 74.2488617,24.2608917 14.684128,20.9317148 L31.9567699,52.2629068 L14.3329415,84.5989538 Z" id="Fill-3" fill="#929597" transform="translate(67.926708, 105.281297) rotate(-10.000000) translate(-67.926708, -105.281297) "></path> 
                        </g> 
                        <g id="planung" transform="translate(0.000000, 21.000000)"> 
                            <path d="M235.199169,149.908757 C232.822091,144.145105 231.501757,137.836232 231.501757,131.219086 C231.501757,104.294834 253.206038,82.4289332 280.151837,81.9692992 L297.568617,50.0144314 L280.191654,18.4906686 C218.002976,18.9312833 167.724378,69.2279266 167.724378,131.219086 C167.724378,149.067152 171.898799,165.942061 179.31831,180.94198 L197.635752,150.905688 C197.635752,150.905688 218.476781,150.352568 228.897295,150.076009 C230.99792,150.020258 235.199169,149.908757 235.199169,149.908757 Z" id="Fill-1" fill="#F89B1C" transform="translate(232.646498, 99.716324) rotate(-10.000000) translate(-232.646498, -99.716324) "></path> 
                            <path class="hover" d="M235.199169,149.908757 C232.822091,144.145105 231.501757,137.836232 231.501757,131.219086 C231.501757,104.294834 253.206038,82.4289332 280.151837,81.9692992 L297.568617,50.0144314 L280.191654,18.4906686 C218.002976,18.9312833 167.724378,69.2279266 167.724378,131.219086 C167.724378,149.067152 171.898799,165.942061 179.31831,180.94198 L197.635752,150.905688 C197.635752,150.905688 218.476781,150.352568 228.897295,150.076009 C230.99792,150.020258 235.199169,149.908757 235.199169,149.908757 Z" id="Fill-1" fill="#F89B1C" transform="translate(232.646498, 99.716324) rotate(-10.000000) translate(-232.646498, -99.716324) "></path> 
                            <polyline id="Path-3" stroke="#262B2F" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" transform="translate(90.914251, 68.867376) scale(-1, -1) rotate(-62.000000) translate(-90.914251, -68.867376) " points="58.0721296 -15.8193708 58.0721296 30.0200281 123.756372 153.554122"></polyline> 
                        </g> 
                    </g> 
                </g> 
            </g> 
        </g> 
    </g> 
</svg>

Ну, или отобраражать их при наведение на них самих:

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

<?xml version="1.0" encoding="UTF-8"?> 
<svg width="562px" height="248px" viewBox="0 0 562 248" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  
     
  <filter xmlns="http://www.w3.org/2000/svg" id="dropshadow" > 
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>  
      <feOffset dx="2" dy="2" result="offsetblur"  /> 
      <feComponentTransfer> 
        <feFuncA type="linear" slope="0.5"/> 
      </feComponentTransfer> 
      <feMerge>  
        <feMergeNode/> 
        <feMergeNode in="SourceGraphic"/>  
      </feMerge> 
    </filter> 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
        <g id="Projektablauf" transform="translate(-118.000000, -1351.000000)"> 
            <g id="Ablauf" transform="translate(119.000000, 1144.000000)"> 
                <g id="2.-Realisation" transform="translate(0.000000, 177.000000)"> 
                    <g id="Graph---Planung"> 
                        <g id="betrieb" transform="translate(193.000000, 150.000000)"> 
                            <path d="M143.544814,22.0253781 C134.476876,33.4488689 120.445343,40.788749 104.681768,40.788749 C86.4574984,40.788749 70.5442109,30.9842795 61.9492997,16.3932762 L24.9035042,17.3743572 L6.42520156,47.6729575 C25.9833429,81.4885507 62.6604324,104.257077 104.681768,104.257077 C144.091104,104.257077 178.79486,84.2273356 199.089617,53.8447332 L162.671339,53.0522607 L143.544814,22.0253781 Z" id="Fill-6" fill="#E1E1E1" transform="translate(102.757409, 60.325177) rotate(-10.000000) translate(-102.757409, -60.325177) "></path> 
                            <path class="hover" d="M143.544814,22.0253781 C134.476876,33.4488689 120.445343,40.788749 104.681768,40.788749 C86.4574984,40.788749 70.5442109,30.9842795 61.9492997,16.3932762 L24.9035042,17.3743572 L6.42520156,47.6729575 C25.9833429,81.4885507 62.6604324,104.257077 104.681768,104.257077 C144.091104,104.257077 178.79486,84.2273356 199.089617,53.8447332 L162.671339,53.0522607 L143.544814,22.0253781 Z" id="Fill-6" fill="#E1E1E1" transform="translate(102.757409, 60.325177) rotate(-10.000000) translate(-102.757409, -60.325177) "></path> 
                            <polyline id="Path-3" stroke="#262B2F" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" transform="translate(239.815335, 114.979579) rotate(-60.000000) translate(-239.815335, -114.979579) " points="186.147524 -0.895496313 186.147524 44.9439025 293.483147 230.854655"></polyline> 
                        </g> 
                        <g id="realisation" transform="translate(272.000000, 0.000000)"> 
                            <polyline id="Path-3" stroke="#262B2F" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" transform="translate(197.361080, 71.409679) scale(1, -1) rotate(-60.000000) translate(-197.361080, -71.409679) " points="162.426848 -10.8780845 162.426848 34.9613144 232.295312 153.697442"></polyline> 
                            <path d="M14.3329415,84.5989538 C38.7973414,87.5929149 57.7430963,108.329542 57.7430963,133.484204 C57.7430963,142.545334 55.2744384,151.028752 50.984548,158.323461 L69.7909433,188.832067 L106.492719,189.630879 C116.052796,173.099111 121.520475,153.926824 121.520475,133.484204 C121.520475,73.3759586 74.2488617,24.2608917 14.684128,20.9317148 L31.9567699,52.2629068 L14.3329415,84.5989538 Z" id="Fill-3" fill="#929597" transform="translate(67.926708, 105.281297) rotate(-10.000000) translate(-67.926708, -105.281297) "></path> 
                            <path class="hover" d="M14.3329415,84.5989538 C38.7973414,87.5929149 57.7430963,108.329542 57.7430963,133.484204 C57.7430963,142.545334 55.2744384,151.028752 50.984548,158.323461 L69.7909433,188.832067 L106.492719,189.630879 C116.052796,173.099111 121.520475,153.926824 121.520475,133.484204 C121.520475,73.3759586 74.2488617,24.2608917 14.684128,20.9317148 L31.9567699,52.2629068 L14.3329415,84.5989538 Z" id="Fill-3" fill="#929597" transform="translate(67.926708, 105.281297) rotate(-10.000000) translate(-67.926708, -105.281297) "></path> 
                        </g> 
                        <g id="planung" transform="translate(0.000000, 21.000000)"> 
                            <path d="M235.199169,149.908757 C232.822091,144.145105 231.501757,137.836232 231.501757,131.219086 C231.501757,104.294834 253.206038,82.4289332 280.151837,81.9692992 L297.568617,50.0144314 L280.191654,18.4906686 C218.002976,18.9312833 167.724378,69.2279266 167.724378,131.219086 C167.724378,149.067152 171.898799,165.942061 179.31831,180.94198 L197.635752,150.905688 C197.635752,150.905688 218.476781,150.352568 228.897295,150.076009 C230.99792,150.020258 235.199169,149.908757 235.199169,149.908757 Z" id="Fill-1" fill="#F89B1C" transform="translate(232.646498, 99.716324) rotate(-10.000000) translate(-232.646498, -99.716324) "></path> 
                            <path class="hover" d="M235.199169,149.908757 C232.822091,144.145105 231.501757,137.836232 231.501757,131.219086 C231.501757,104.294834 253.206038,82.4289332 280.151837,81.9692992 L297.568617,50.0144314 L280.191654,18.4906686 C218.002976,18.9312833 167.724378,69.2279266 167.724378,131.219086 C167.724378,149.067152 171.898799,165.942061 179.31831,180.94198 L197.635752,150.905688 C197.635752,150.905688 218.476781,150.352568 228.897295,150.076009 C230.99792,150.020258 235.199169,149.908757 235.199169,149.908757 Z" id="Fill-1" fill="#F89B1C" transform="translate(232.646498, 99.716324) rotate(-10.000000) translate(-232.646498, -99.716324) "></path> 
                            <polyline id="Path-3" stroke="#262B2F" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" transform="translate(90.914251, 68.867376) scale(-1, -1) rotate(-62.000000) translate(-90.914251, -68.867376) " points="58.0721296 -15.8193708 58.0721296 30.0200281 123.756372 153.554122"></polyline> 
                        </g> 
                    </g> 
                </g> 
            </g> 
        </g> 
    </g> 
</svg>

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Помогите разобраться с запросом

Есть запрос, но в нем нету 1 поля с таблицы images "SELECT id, name, url, description, visible, price, amount FROM products WHERE id = $id"; Есть запрос с join где как раз объединил 2 таблицы,...

214

MySQL