主页 / 问题 / 700401
Accepted
siberian
Asked:2020-08-01 15:51:37 +0000 UTC2020-08-01 15:51:37 +0000 UTC

路径 svg 上的动画阴影外观

  • 772

悬停时实现阴影的外观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;不起作用。

css

1 个回答

  1. Best Answer

    您可以复制您的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>

    • 2

相关问题