触发Tween以将鼠标悬停在SVG六角形上

2024-05-20 • 问答

我希望仅在您悬停的六边形上触发Tween动画。目前，只有顶部六边形触发围绕六边形的模糊的红色轮廓动画。

每个单独的六角形都应仅对其应用过滤器。

预先感谢您的建议。

HTML

    <svg viewBox="0 0 100 100">
  <defs>
         <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="0" class="flag-blur" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0   0 0 0 0 0  0 0 0 0.4 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="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" ">
    <use xlink:href="#pod" transform="translate(50,41)" class="flag" />
    <use xlink:href="#pod" transform="translate(35,50)" class="flag"  />
    <use xlink:href="#pod" transform="translate(65,50)" class="flag" />
    <use xlink:href="#pod" transform="translate(50,59)" class="flag"  />
  </g>
</svg>

<a href="http://www.mathopenref.com/coordpolycalc.html" target="_blank">point calculator</a>

CSS

/* grid styling */
use {
  transition: 0.1s;
  cursor: pointer;
  fill: transparent;
}

use {filter: url(#filter-1);}




/* other styling */
svg {
  width: 700px;
  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;
}
a {
  color: #ccc;
  padding: 10px;
  text-decoration: none;
  transition: color 0.4s;
}

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



function startPage() {

  // 
  flag.onmouseover = function() {
    Tweenmax.to(flagBlur,0.9,{
      attr:{stdDeviation: 0.9},ease: Power1.easeinout
    });
  };

  flag.onmouseleave = function() {
    Tweenmax.to(flagBlur,0.35,{
      attr:{stdDeviation: 0},ease: Power1.easeinout
    });
  };
}

startPage();

使用document.querySelectorAll（'。flag'）返回具有该类的元素数组，而不仅仅是第一个元素。

然后，您可以使用.forEach（）或其他方法继续遍历数组

querySelector（）函数将仅返回第一个匹配元素，而不是全部返回。

function startPage() {

  // 
  document.querySelectorAll(".flag").forEach(function(flag){ 
    flag.onmouseover = function() {
     TweenMax.to(flagBlur,0.9,{
       attr:{stdDeviation: 0.9},ease: Power1.easeInOut
     });
   };

   flag.onmouseleave = function() {
     TweenMax.to(flagBlur,0.35,{
       attr:{stdDeviation: 0},ease: Power1.easeInOut
     });
    };

  });
}

有2个更正：

使用document.querySelectorAll(".flag")在所有四个六角形上添加一个侦听器。
为模糊滤镜使用一个单独的类，并将其添加/删除到与之交互的六边形。同时从transition

use

检查以下代码：

// переменные
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,{
        attr: {
          stdDeviation: 0
        }
      },{
        attr: {
          stdDeviation: 0.9
        },ease: Power1.easeInOut
      });
    }

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

startPage();

/* grid styling */
use {
  cursor: pointer;
  fill: transparent;
}

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

/* other styling */
svg {
  width: 700px;
  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/3.2.4/gsap.min.js"></script>
<svg viewBox="0 0 100 100">
  <defs>
         <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="0" class="flag-blur" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0   0 0 0 0 0  0 0 0 0.4 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="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">
    <use xlink:href="#pod" transform="translate(50,41)" class="flag h1" />
    <use xlink:href="#pod" transform="translate(35,50)" class="flag h2"  />
    <use xlink:href="#pod" transform="translate(65,50)" class="flag h3" />
    <use xlink:href="#pod" transform="translate(50,59)" class="flag h4"  />
  </g>
</svg>

触发Tween以将鼠标悬停在SVG六角形上

liangpengju20080809 回答：触发Tween以将鼠标悬停在SVG六角形上

大家都在问