将鼠标悬停在悬停元素上时，出现反向radialGradient SVG动画

Question

我希望radialGradient动画仅在您将鼠标悬停在onmouseout上后才应用于单个六边形，我希望动画反转。

[如何在仅悬停在六边形上（而不是所有六边形上）的radiusGradient触发器上，然后在mouseout / mouseleave上反转动画？谢谢。

我尝试添加

{   fill: url(#myRadialGradient4);}

to

.filter-class

但是很明显，一旦发生mouseout，将删除该类，从而在mouseout上停止平滑的反向动画。

我已经尝试过：

https://codepen.io/daneli84/pen/OJVZmeJ

// 
var flagBlur = document.querySelector('.flag-blur');
var flags = document.querySelectorAll('.flag');


// 
function startPage() {
  flags.forEach(flag => {
    flag.onmouseover = function() {
      flag.classList.add('filter-class')
      TweenMax.fromTo(flagBlur, 19, {
        attr: {
          stdDeviation: 0.5
        }
      }, {
        attr: {
          stdDeviation: 1
        },
        ease: Power1.easeInOut
      });
    }

    flag.onmouseleave = function() {
      flag.classList.remove('filter-class')
    }
  })
}

startPage();

/* grid styling */
use {-webkit-transition: 5s;
    
 -webkit-transition: all 5s ease;
  transition: all 5s ease;
 
}
use:hover {
  cursor: pointer;
  
 
}

g {   fill: url(#myRadialGradient4);}

#pod { -webkit-transition: all 5s ease;
  transition: all 5s ease;}

text{pointer-events:none;color:white!important;}

.filter-class {
filter: url(#filter-1);

}


/* other styling */
svg {
  width: 800px!important;
  flex: 1;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  height: 100vh;
  font-weight: 700;
  font-family: sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg viewBox="0 0 100 100">
  <defs>
    
        <radialGradient id="myRadialGradient4"
           fx="15%" fy="5%" r="65%"
           spreadMethod="pad">
          
          <stop offset="0%"  stop-color="#fff" ></stop>
          <stop offset="100%" stop-color="#50287C"  ></stop>
              <animate attributeName="fy" dur="2s" from="90%" to="0%"  begin="pod.mouseover" end="pod.mouseout;indefinite" fill="freeze"/>
          
          <animate attributeName="fy" dur="2s" from="0%" to="90%"    begin="pod.mouseout" end="pod.mousover;indefinite" fill="freeze"/>
          
       
    </radialGradient>

    
    <filter id="innershadow" x0="20%" y0="5%" width="200%" height="200%">
			<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
			<feOffset dy="0.2" dx="-0.1"></feOffset>
			<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>
			
           <feFlood flood-color="#E5E5C5" flood-opacity="-15"></feFlood>
		   <feComposite in2="shadowDiff" operator="in"></feComposite>
		   <feComposite in2="SourceGraphic" operator="over" result="firstfilter"></feComposite>
          
          
          <feGaussianBlur in="firstfilter" stdDeviation="0.9" result="blur2"></feGaussianBlur>
			<feOffset dy="0.1" dx="0.1"></feOffset>
			<feComposite in2="firstfilter" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>
			
           <feFlood flood-color="#fff" flood-opacity="0.5"></feFlood>
			<feComposite in2="shadowDiff" operator="in"></feComposite>
			<feComposite in2="firstfilter" operator="over"></feComposite>
		</filter>

      
    </linearGradient>
       <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(20,0,12);stop-opacity:1;" />
      <stop offset="100%" style="stop-color:rgb(8,20,128);stop-opacity:1" />
    </linearGradient>

    
    
         <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="1" class="flag-blur" in="shadowOffsetOuter1" result="shadowBlurOuter1">
           
           </feGaussianBlur>

            <feColorMatrix values="200 150 255 0 0   255 255 200 0 0   255 0 0 0 0  0 0 0 1 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
    
    <g id="pod">
      <polygon  stroke="#000000" stroke-width="0.1" points="5,-9 -5,-9 -10,0 -5,9 5,9 10,0" />
    </g>
        
        <!-- a transparent grey drop-shadow that blends with the background colour -->
        
  </defs>
  
  <g class="pod-wrap">
    
    <g transform="translate(65, 68)" filter="url(#innershadow)">

      <use xlink:href="#pod" class="h1 flag">
</use>
      <text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="2.3" fill="white">TRANSPORT</text>
    </g>
    
    <g transform="translate(50, 41)" filter="url(#innershadow)">
       

      <use xlink:href="#pod" class="h1 flag">
        
</use>
      <text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
  
  </g>
    
    
    <g transform="translate(35, 50)" filter="url(#innershadow)" >
       
      <use xlink:href="#pod" class="h1 flag">
</use>
      <text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
  
  </g>
    
    <g transform="translate(65, 50)" filter="url(#innershadow)">
       

      <use xlink:href="#pod" class="h1 flag">
</use>
      <text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
  
        </g>
    

    <g transform="translate(50, 59)"  filter="url(#innershadow)">
       

      <use xlink:href="#pod" class="h1 flag">
</use>
      <text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
  
  </g>


  </g>

</svg>

Answer 1

您要设置动画的径向渐变必须与其余六边形使用的渐变不同。

悬停时，您将切换到备用渐变，并通过在其上调用<animation>来启动beginElement()。您可能还需要第三个<animation>用于反向动画。

但是这种方法很复杂，我认为它不会产生非常令人满意的结果。

不同的方法

我建议使用其他方法。

• 使每个六边形的背景为已应用渐变的矩形
• 然后在悬停上设置背景动画
• 在该矩形上使用六角形的剪切路径

您可以使用纯CSS做到这一点。而且要简单得多。

注意：在下面的示例中，我删除了过滤器，使此示例更易于理解。

.pod-bg {
  -webkit-transition: 5s;
  -webkit-transition: all 5s ease;
  transition: all 5s ease;
}

.pod-bg:hover {
  transform: translate(0, -16px);
}

.h1.flag {
  fill: url(#myRadialGradient4);
}

.pod-stroke {
  stroke: #000000;
  stroke-width: 0.1;
  fill: none;
  pointer-events: none;
  cursor: pointer;
}

text {
  pointer-events: none;
  color: white;
}

/* other styling */
svg {
  width: 800px!important;
  flex: 1;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  height: 100vh;
  font-weight: 700;
  font-family: sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg viewBox="0 0 100 100">
  <defs>
    
    <radialGradient id="myRadialGradient4h" fx="15%" fy="45%" r="65%" spreadMethod="pad">
      <stop offset="0%"  stop-color="#fff" ></stop>
      <stop offset="100%" stop-color="#50287C"  ></stop>
    </radialGradient>

    <polygon id="pod" points="5,-9 -5,-9 -10,0 -5,9 5,9 10,0" />
    
    <!-- a rect the same width and double the height of a pod hexagon -->
    <rect id="bg-rect" x="-10" y="-9" width="20" height="36" fill="url(#myRadialGradient4h)"/>
    
    <!-- a clipping path version of the pod hexagon -->
    <clipPath id="pod-clip">
      <use xlink:href="#pod"></use>
    </clipPath>
        
  </defs>
  
  <g class="pod-wrap">
    <g transform="translate(65, 68)">
      <g clip-path="url(#pod-clip)">
        <use xlink:href="#bg-rect" class="pod-bg"/>
      </g>
      <use xlink:href="#pod" class="pod-stroke"></use>
      <text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="2.3" fill="white">TRANSPORT</text>
    </g>
    
    <g transform="translate(50, 41)">
      <g clip-path="url(#pod-clip)">
        <use xlink:href="#bg-rect" class="pod-bg"/>
      </g>
      <use xlink:href="#pod" class="pod-stroke"></use>
      <text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
    </g>
    
    <g transform="translate(35, 50)">
      <g clip-path="url(#pod-clip)">
        <use xlink:href="#bg-rect" class="pod-bg"/>
      </g>
      <use xlink:href="#pod" class="pod-stroke"></use>
      <text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
    </g>
    
    <g transform="translate(65, 50)">
      <g clip-path="url(#pod-clip)">
        <use xlink:href="#bg-rect" class="pod-bg"/>
      </g>
      <use xlink:href="#pod" class="pod-stroke"></use>
      <text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
    </g>
    
    <g transform="translate(50, 59)">
      <g clip-path="url(#pod-clip)">
        <use xlink:href="#bg-rect" class="pod-bg"/>
      </g>
      <use xlink:href="#pod" class="pod-stroke"></use>
      <text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
    </g>
  </g>

</svg>