Не могу заставить мою анимацию при наведении тени на ключевом кадре CSS работать на моем SVG - PullRequest
Новая
       48

Не могу заставить мою анимацию при наведении тени на ключевом кадре CSS работать на моем SVG

0 голосов
/ 25 апреля 2019

Я нашел код CSS в https://codepen.io/FelixRilling/pen/qzfoc, чтобы помочь мне создать эффект свечения на строке текста для проекта, над которым я работал. Я сейчас пытаюсь сделать тот же эффект для всего файла SVG. Я изменил «text-shadow» на «filter: drop-shadow», но свечение / тень не появляется. Я был в состоянии успешно нацелиться на SVG (используя базовый эффект наведения заливки). Я хочу знать, возможна ли эта анимация в SVG и не связана ли она с моим синтаксисом @keyframes. Кто-нибудь знает, как я могу настроить это, чтобы он работал на SVG? Спасибо !!

CSS 


#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));
    }
  }

Встроенный SVG 


<svg version="1.0" xmlns="http://www.w3.org/2000/svg" id= "ring"
                        viewBox="0 0 1503.000000 1584.000000"
                        preserveAspectRatio="xMidYMid meet">

                        <g transform="translate(0.000000,1584.000000) scale(0.100000,-0.100000)"
                        fill="#000000" stroke="none">
                            <path id="ring" d="M6809 14732... 53z"/>
                        </g>
                    </svg>

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

Спасибо!

1 Ответ

0 голосов
/ 25 апреля 2019

Проблема в объявлении функции drop-shadow. text-shadow позволяет применять несколько теней в качестве единого правила, разделенных запятыми ,. Однако функция drop-shadow принимает только одно объявление тени для каждой функции. Поэтому вам нужно разделить все объявления text-shadows на множество drop-shadow() функций в вашем filter правиле: 

#ring:hover {
  animation: neon4 1s ease-in-out infinite alternate;
}
@keyframes neon4 {
  from {
      filter: drop-shadow(0 0 10px #fff)drop-shadow( 0 0 20px #fff)drop-shadow( 0 0 30px #fff)drop-shadow( 0 0 40px rgb(252, 226, 32))drop-shadow( 0 0 70px rgb(252, 226, 32))drop-shadow( 0 0 80px rgb(252, 226, 32))drop-shadow( 0 0 100px rgb(252, 226, 32))drop-shadow( 0 0 150px rgb(252, 226, 32));;
  }
  to {
      filter: drop-shadow(0 0 5px #fff)drop-shadow( 0 0 10px #fff)drop-shadow( 0 0 15px #fff)drop-shadow( 0 0 20px rgb(252, 226, 32))drop-shadow( 0 0 35px rgb(252, 226, 32))drop-shadow( 0 0 40px rgb(252, 226, 32))drop-shadow( 0 0 50px rgb(252, 226, 32))drop-shadow( 0 0 75px rgb(252, 226, 32));
  }
}
<svg id="ring" width="84" height="84">
  <rect stroke="black" fill="none" x="2" y="2" width="80" height="80"/>
</svg>
...