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

Question

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

每个单独的六边形应仅将过滤器应用于自身。

提前感谢您的建议。

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;

}

Answer 1

有2个更正：用于document.querySelectorAll(".flag")在所有四个六边形上添加监听器。为模糊过滤器使用单独的类并将其添加/删除到您正在与之交互的六边形。也transition从use检查下面的代码：// переменныеvar flagBlur = document.querySelector('.flag-blur');var flags = document.querySelectorAll('.flag');// наведение курсора на флагиfunction startPage() {&nbsp; flags.forEach(flag => {&nbsp; &nbsp; flag.onmouseover = function() {&nbsp; &nbsp; &nbsp; flag.classList.add('filter-class')&nbsp; &nbsp; &nbsp; TweenMax.fromTo(flagBlur, 0.9, {&nbsp; &nbsp; &nbsp; &nbsp; attr: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stdDeviation: 0&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; attr: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stdDeviation: 0.9&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; ease: Power1.easeInOut&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; flag.onmouseleave = function() {&nbsp; &nbsp; &nbsp; flag.classList.remove('filter-class')&nbsp; &nbsp; }&nbsp; })}startPage();/* grid styling */use {&nbsp; cursor: pointer;&nbsp; fill: transparent;}.filter-class {&nbsp; filter: url(#filter-1);}/* other styling */svg {&nbsp; width: 700px;&nbsp; flex: 1;}body {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; flex-direction: column;&nbsp; margin: 0;&nbsp; height: 100vh;&nbsp; font-weight: 700;&nbsp; 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">&nbsp; <defs>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <feGaussianBlur stdDeviation="0" class="flag-blur" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <feColorMatrix values="0 0 0 0 1&nbsp; &nbsp;0 0 0 0 0&nbsp; &nbsp;0 0 0 0 0&nbsp; 0 0 0 0.4 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <feMerge>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <feMergeNode in="shadowMatrixOuter1"></feMergeNode>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <feMergeNode in="SourceGraphic"></feMergeNode>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </feMerge>&nbsp; &nbsp; &nbsp; &nbsp; </filter>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <g id="pod">&nbsp; &nbsp; &nbsp; <polygon stroke="#000000" stroke-width="1" points="5,-9 -5,-9 -10,0 -5,9 5,9 10,0" />&nbsp; &nbsp; </g>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <!-- a transparent grey drop-shadow that blends with the background colour -->&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; </defs>&nbsp;&nbsp;&nbsp; <g class="pod-wrap">&nbsp; &nbsp; <use xlink:href="#pod" transform="translate(50, 41)" class="flag h1" />&nbsp; &nbsp; <use xlink:href="#pod" transform="translate(35, 50)" class="flag h2"&nbsp; />&nbsp; &nbsp; <use xlink:href="#pod" transform="translate(65, 50)" class="flag h3" />&nbsp; &nbsp; <use xlink:href="#pod" transform="translate(50, 59)" class="flag h4"&nbsp; />&nbsp; </g></svg>

Answer 2

使用 document.querySelectorAll('.flag') 返回一个具有该类的元素数组，而不仅仅是第一个。然后您可以使用 .forEach() 或其他方法继续迭代数组querySelector() 函数只会返回第一个匹配元素，而不是全部。function startPage() {&nbsp; //&nbsp;&nbsp; document.querySelectorAll(".flag").forEach(function(flag){&nbsp;&nbsp; &nbsp; flag.onmouseover = function() {&nbsp; &nbsp; &nbsp;TweenMax.to(flagBlur, 0.9, {&nbsp; &nbsp; &nbsp; &nbsp;attr:{stdDeviation: 0.9},&nbsp; &nbsp; &nbsp; &nbsp;ease: Power1.easeInOut&nbsp; &nbsp; &nbsp;});&nbsp; &nbsp;};&nbsp; &nbsp;flag.onmouseleave = function() {&nbsp; &nbsp; &nbsp;TweenMax.to(flagBlur, 0.35, {&nbsp; &nbsp; &nbsp; &nbsp;attr:{stdDeviation: 0},&nbsp; &nbsp; &nbsp; &nbsp;ease: Power1.easeInOut&nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; };&nbsp; });}