5

Реализовала появление тени при наведении у 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; не срабатывает.

1
  • И увеличение задержки тоже на помогает? И попробуйте добавить transition: all 0.3s ease; к #Projektablauf path:hover 1 авг 2017 в 8:28

1 ответ 1

2

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

1
  • отлично, спасибо большое
    – siberian
    1 авг 2017 в 9:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.