代码之家 › 专栏 › 技术社区 › danelig

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

smil svg-animate svg-filters svg javascript

danelig · 技术社区 · 6 年前

我希望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;
}

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

0 回复 | 直到 6 年前

Daniel 6 年前

你可以使用 pointer-event 文本元素上的属性

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

指针事件属性是一个表示属性,允许定义元素是否或何时可能是鼠标事件的目标。