Возможно ли применить CSS3 анимированный стиль текста-тени к SVG?

Question

Я нашел этот крутой неоновый CSS-эффект , и я надеялся, что смогу применить его к SVG.К сожалению, он использует text-shadow, поэтому мне было интересно, есть ли способ применить такой же стиль к моему SVG.Я попытался просто изменить значение с text-shadow на box-shadow, но это относится только к внешним границам SVG.

body {
  background-color: #222222;
  background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px;
}

h2 {
  font-family:sans-serif;
  font-size:30px;
  color: #FFDD1B;
  -webkit-animation: neon 1.5s ease-in-out infinite alternate;
  animation: neon 1.5s ease-in-out infinite alternate;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

img {
  width:150px;
  -webkit-animation: neonSVG 1.5s ease-in-out infinite alternate;
  animation: neonSVG 1.5s ease-in-out infinite alternate;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

body {
  background-color: #222222;
  background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px;
}

h2 {
  font-family:sans-serif;
  font-size:30px;
  color: #FFDD1B;
}

img {
  width:150px;
}

@keyframes neon {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}
@-webkit-keyframes neon {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}

@keyframes neonSVG {
  from {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}
@-webkit-keyframes neonSVG {
  from {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}

<h2>This is some text</h2>

<img src="https://camo.githubusercontent.com/133ab8b9b686378b2f2c70b215b369ec4d24c8a9/68747470733a2f2f63646e2e737667706f726e2e636f6d2f6c6f676f732f616479656e2e737667" />

Answer 1

Вам нужно использовать filter для работы с SVG.Затем вы анимируете его с помощью обычного CSS-перехода или @ ключевых кадров.

Вот пример с анимацией при наведении.

svg {
  filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
  transition: all 0.25s ease-in-out;
}

svg:hover {
  filter: drop-shadow(5px 5px 3px rgba(67,237,82,0.9));
}

<?xml version="1.0" encoding="UTF-8"?>
<svg width="180px" height="49px" viewBox="0 0 180 49" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="svgText" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="Lato-Black, Lato" font-size="40" font-weight="700" letter-spacing="-0.333333343">
        <text id="SVG-Text" fill="#A5A5A7">
            <tspan x="8" y="40">SVG Text</tspan>
        </text>
    </g>
</svg>