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

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

我在这里包括了Codepen：DB<>Fiddle

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);stop-opacity:1" />

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