触发 Tween 用于单独悬停在 SVG 六边形上

Question

我希望仅为您悬停的六边形触发 Tween 动画。目前只有顶部六边形触发了六边形周围模糊的红色轮廓动画。每个单独的六边形应仅将过滤器应用于自身。提前感谢您的建议。https://codepen.io/daneli84/pen/OJVZmeJHTML    <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;}

Answer 1

有2个更正：

1. 用于document.querySelectorAll(".flag")在所有四个六边形上添加监听器。

2. 为模糊过滤器使用单独的类并将其添加/删除到您正在与之交互的六边形。也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, 0.9, {

        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>

Answer 2

使用 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

     });

    };

  });

}