javascript - 如何阻止 SVG 文本悬停停止渐变填充

Question

我希望 svg 背景填充渐变即使悬停在文本上也能保持填充，但是当您将鼠标悬停在文本上时会清除填充。

我尝试过移动文本，甚至移动“flag”类，但没有成功。非常感谢。

我已经将代码笔包含在这里:https://codepen.io/daneli84/pen/OJVZmeJ

HTML

<svg viewBox="0 0 100 100">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(5,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />

</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(20,0,0);stop-opacity:0.1" />
        </linearGradient>

<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="1" 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 9 2 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>


</defs>

<g class="pod-wrap">
<g transform="translate(50, 41)" class="flag">


<use xlink:href="#pod" class="h1 flag">
</use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" 
fill="blue">CNI</text>

</g>

<use xlink:href="#pod" transform="translate(35, 50)" class="flag h2"  />

<use xlink:href="#pod" transform="translate(65, 50)" class=" h3" />
<use xlink:href="#pod" transform="translate(50, 59)" class=" h4"  />
</g>
</svg>

CSS

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

g {cursor: pointer;}

filter: url(#filter-1);
fill: url(#grad2);
}

/* other styling */
svg {
width: 700px;
flex: 1;
}

body {
di

splay: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
font-weight: 700;
font-family: sans-serif;
}

JS

// 
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, 1, {
attr: {
}
}, {
attr: {
stdDeviation: 1.2
},
ease: Power1.easeInOut
});
}

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

Answer 1

您可以在文本元素上使用pointer-event属性

其他选项有:bounding-box |可见画 |可见填充 |可见笔画 |可见 |画 |填充|中风 |全部 |无，但在本例中，只需使用none

<text
  class="h1"
  alignment-baseline="middle"
  text-anchor="middle"
  font-family="Verdana"
  font-size="5"
  fill="blue"
  pointer-events="none"
>CNI</text>

The pointer-events attribute is a presentation attribute that allows defining whether or when an element may be the target of a mouse event.

更多阅读:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events