Как остановить SVG-текстовое зависание от остановки градиентной заливки - PullRequest
Новая
       89

Как остановить SVG-текстовое зависание от остановки градиентной заливки

0 голосов
/ 16 марта 2020

Я хочу, чтобы градиент заливки фона 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();

1 Ответ

1 голос
/ 16 марта 2020

Вы можете использовать атрибут pointer-event для вашего текстового элемента

Другие варианты: bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none, но в этом случае просто используйте none

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

Атрибут указатель-события является атрибутом представления, который позволяет определить, может ли элемент быть целью события мыши.

больше чтения: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events

...