Trigger Tween для индивидуального зависания над шестиугольниками SVG

Question

Я хочу, чтобы анимация анимации запускалась только для шестиугольника, над которым вы наводите курсор. На данный момент только верхний шестиугольник вызывает размытую анимацию reddi sh вокруг шестиугольника.

Для каждого отдельного шестиугольника фильтр должен применяться только к самому себе.

Заранее спасибо за совет.

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

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;
}

JS

// 
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();

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
     });
    };

  });
}