Не могу заставить мою анимацию CSS KeyFrame Hover Drop-Shadow, чтобы работать над моим SVG ⇐ CSS

[Anonymous]

Я нашел код CSS по адресу https://codepen.io/felixrilling/pen/qzfoc, чтобы помочь мне создать сияющий эффект на линии. Текст для проекта, над которым я работал. Сейчас я пытаюсь сделать то же самое на весь файл SVG. Я изменил «Текст-тени» на «Фильтр: отброс», но свечение/тень не появляется. Я смог успешно нацелиться на SVG (используя базовый эффект накидного наполнения). Я хочу знать, возможно ли эта анимация на SVG, и если моя проблема с моим синтаксисом @KeyFrames. Кто -нибудь знает, как я могу настроить это, чтобы заставить его работать на SVG? Спасибо !! < /p>

css < /p>


#ring {
width: 15rem;
height: auto;
fill: rgb(92, 92, 92);
padding-top: 5rem;

text-decoration: none;
-webkit-transition: all 0.15s;
-moz-transition: all 0.15s;
transition: all 0.15s;
}

#ring:hover {
-webkit-animation: neon4 1s ease-in-out infinite alternate;
-moz-animation: neon4 1s ease-in-out infinite alternate;
animation: neon4 1s ease-in-out infinite alternate;
fill: rgba(255, 249, 216, 0.988);
}

/*-- Glow Animation --*/
@keyframes neon4 {
from {
filter: drop-shadow(0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px rgb(252, 226, 32), 0 0 70px rgb(252, 226, 32), 0 0 80px rgb(252, 226, 32), 0 0 100px rgb(252, 226, 32), 0 0 150px rgb(252, 226, 32));
}
to {
filter: drop-shadow(0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px rgb(252, 226, 32), 0 0 35px rgb(252, 226, 32), 0 0 40px rgb(252, 226, 32), 0 0 50px rgb(252, 226, 32), 0 0 75px rgb(252, 226, 32));
}
}

/*-- Glow for Webkit --*/
@-webkit-keyframes neon4 {
from {
filter: drop-shadow(0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px rgb(252, 226, 32), 0 0 70px rgb(252, 226, 32), 0 0 80px rgb(252, 226, 32), 0 0 100px rgb(252, 226, 32), 0 0 150px rgb(252, 226, 32));
}
to {
filter: drop-shadow(0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px rgb(252, 226, 32), 0 0 35px rgb(252, 226, 32), 0 0 40px rgb(252, 226, 32), 0 0 50px rgb(252, 226, 32), 0 0 75px rgb(252, 226, 32));
}
}
/*-- Glow for Mozilla --*/
@-moz-keyframes neon4 {
from {
filter: drop-shadow(0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px rgb(252, 226, 32), 0 0 70px rgb(252, 226, 32), 0 0 80px rgb(252, 226, 32), 0 0 100px rgb(252, 226, 32), 0 0 150px rgb(252, 226, 32));
}
to {
filter: drop-shadow(0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px rgb(252, 226, 32), 0 0 35px rgb(252, 226, 32), 0 0 40px rgb(252, 226, 32), 0 0 50px rgb(252, 226, 32), 0 0 75px rgb(252, 226, 32));
}
}
< /code>

inline svg < /p>








< /code>

Подключите любой SVG, который вы хотите, мой файл был слишком большим, чтобы публиковать здесь. Вот файл, с которым я работаю: http://svgur.com/s/3wu

Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/558 ... -on-my-svg