单独悬停在 SVG 六边形上时触发补间

Question

我只想为您悬停的六边形触发补间动画。目前只有顶部六边形会触发六边形周围模糊的红色轮廓动画。

每个六边形都应该只对自己应用滤镜。

提前感谢您的建议。

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

使用 document.querySelectorAll('.flag')，其中 return 是一个包含 class 的元素数组，而不仅仅是第一个元素。

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

querySelector() 函数只会return第一个匹配元素，而不是所有元素。

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

  });
}

Answer 2

有 2 处更正：

使用document.querySelectorAll(".flag")在所有四个六边形上添加监听器。
使用单独的 class 模糊滤镜，add/remove 将其用于您正在与之交互的六边形。同时从 use

transition

检查下面的代码：

// переменные
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>

单独悬停在 SVG 六边形上时触发补间

Trigger Tween for individually hovered over SVG hexagons

javascript

svg

svg-filters

gsap

svg-animationelements