Можно ли создать эффект свечения в SVG

Я изучаю SVG и хотел бы знать, можно ли создать такой эффект свечения с помощью SVG в интерактивном режиме, как в следующем примере: при наведении курсора на эффект - https://codepen.io/FelixRilling/pen/qzfoc

Дело в том, что мне интересно, как заставить свет приходить и уходить, преимуществом SVG будет более точный эффект с лучшим следованием форме, это преимущество такого рода. Возможно ли это сделать с SVG?

Далее код с HTML CSS

HTML:

<div id = "container">

    <p><a href = "https://en.wikipedia.org/wiki/Red">
        RED
    </a></p>

    <p><a href = "https://en.wikipedia.org/wiki/Blue">
        BLUE
    </a></p>

    <p><a href = "https://en.wikipedia.org/wiki/Yellow">
        Yellow
    </a></p>

    <p><a href = "https://en.wikipedia.org/wiki/Green">
        GREEN
    </a></p>

    <p><a href = "https://en.wikipedia.org/wiki/Orange_(colour)">
        ORANGE
    </a></p>

    <p><a href = "https://en.wikipedia.org/wiki/Violet_(color)">
        VIOLET
    </a></p>

</div>

<div id = "linkBack" style = "position:absolute;right:0px;top:0px;background-color:#333;margin:0;width:60px;padding:5px"><a href = "http://www.f-rilling.com/projects/" target = "_blank" style = "font-size:14px;text-decoration:none;color:#fff;padding:0 0 0 5px;font-family:sans-serif">My Site</a></div>

CSS:

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

#container {
  width: 500px;
  margin: auto;
}

/*Neon*/
p {
  text-align: center;
  font-size: 7em;
  margin: 20px 0 20px 0;
}

a {
  text-decoration: none;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

p:nth-child(1) a {
  color: #fff;
  font-family: Monoton;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}

p:nth-child(1) a:hover {
  color: #FF1177;
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}

p:nth-child(2) a {
  font-size: 1.5em;
  color: #228DFF;
  font-family: Iceland;
}

p:nth-child(2) a:hover {
  -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
  -moz-animation: neon2 1.5s ease-in-out infinite alternate;
  animation: neon2 1.5s ease-in-out infinite alternate;
}

p:nth-child(3) a {
  color: #FFDD1B;
  font-family: Pacifico;
}

p:nth-child(3) a:hover {
  -webkit-animation: neon3 1.5s ease-in-out infinite alternate;
  -moz-animation: neon3 1.5s ease-in-out infinite alternate;
  animation: neon3 1.5s ease-in-out infinite alternate;
}

p:nth-child(4) a {
  color: #B6FF00;
  font-family: "Press Start 2P";
  font-size: 0.8em;
}

p:nth-child(4) a:hover {
  -webkit-animation: neon4 1.5s ease-in-out infinite alternate;
  -moz-animation: neon4 1.5s ease-in-out infinite alternate;
  animation: neon4 1.5s ease-in-out infinite alternate;
}

p:nth-child(5) a {
  color: #FF9900;
  font-family: Audiowide;
}

p:nth-child(5) a:hover {
  -webkit-animation: neon5 1.5s ease-in-out infinite alternate;
  -moz-animation: neon5 1.5s ease-in-out infinite alternate;
  animation: neon5 1.5s ease-in-out infinite alternate;
}

p:nth-child(6) a {
  color: #BA01FF;
  font-family: Vampiro One;
}

p:nth-child(6) a:hover {
  -webkit-animation: neon6 1.5s ease-in-out infinite alternate;
  -moz-animation: neon6 1.5s ease-in-out infinite alternate;
  animation: neon6 1.5s ease-in-out infinite alternate;
}

p a:hover {
  color: #ffffff;
}
/*glow for webkit*/

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

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

@-webkit-keyframes neon3 {
  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 neon4 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
  }
}

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

@-webkit-keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
  }
}
/*glow for mozilla*/

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

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

@-moz-keyframes neon3 {
  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;
  }
}

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

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

@-moz-keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
  }
}
/*glow*/

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

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

@keyframes neon3 {
  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 neon4 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
  }
}

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

@keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
  }
}
/*REEEEEEEEEEESPONSIVE*/

@media (max-width: 650px) {
  #container {
    width: 100%;
  }
  p {
    font-size: 3.5em;
  }
}

Вы пробовали это, заменяя шрифты изображением SVG?

— Jeremy Thille 09.01.2019 15:24

Я новичок в svg, и мне очень интересно, возможно ли это сделать, я сделал несколько поисков в Интернете, но не нашел ни одного примера этого эффекта в SVG. Так что мне интересно, имеет ли SVG возможность сделать это легко или комфортно, как минимум, это действительно очень вопрос.

— HoCo_ 09.01.2019 15:25

Но вы пробовали это, заменяя шрифты изображением SVG? :) Посмотрите, что он делает

— Jeremy Thille 09.01.2019 15:26

Нет, моя честь ^^, потому что здесь эффект использует CSS для создания свечения, и мне интересно, можем ли мы получить тот же эффект, удобно в SVG

— HoCo_ 09.01.2019 15:27

Да, отсюда и мой вопрос. Предоставленный вами код принимает текст и применяет к нему эффект свечения. Теперь попробуйте взять тот же код, заменить текст изображением SVG и посмотреть, что он делает.

— Jeremy Thille 09.01.2019 15:30

Хорошо, я попробую, а пока думаю, результат будет такой же

— HoCo_ 09.01.2019 15:31

... ну если результат такой же, значит можно. Проблема решена.

— Jeremy Thille 09.01.2019 15:32

Да, я вас понимаю и спасибо за вашу помощь, на самом деле я бы сделал этот эффект в чистом SVG, а не с CSS, это был мой вопрос, точнее ^^

— HoCo_ 09.01.2019 15:56

Ааааааа, теперь я понял> _ <Ну, однозначно, да, потому что в Illustrator есть фильтр «светиться», так что да, ваш SVG может светиться. Но этот вопрос не относится к Stackoverflow, он о векторном дизайне, поэтому я так запутался

— Jeremy Thille 09.01.2019 15:59

Вы можете попробовать с фильтрами svg, но фильтры теней svg не имеют понятия распространения (в терминах теней css), поэтому получить такой сильный эффект свечения может быть не так просто.

— Ted 09.01.2019 17:49
html css svg
09.01.2019 15:22
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
7
10
10 623
2

Ответы 2

Вот базовая настройка:

<svg width = "100%" height = "300">
  <filter id = "neon">
    <feFlood flood-color = "rgb(255,255,128)" flood-opacity = "0.5" in = "SourceGraphic" />
    <feComposite operator = "in" in2 = "SourceGraphic" />
    <feGaussianBlur stdDeviation = "10" />
    <feComponentTransfer result = "glow1">
      <feFuncA type = "linear" slope = "4" intercept = "0" />
    </feComponentTransfer>
    <feMerge>
       <feMergeNode in = "glow1" />
       <feMergeNode in = "SourceGraphic" />
    </feMerge>
  </filter>
  <rect width = "100%" height = "100%" fill = "black" />
  <text text-anchor = "middle" font-size = "100" font-family = "sans-serif" x = "50%" y = "200" fill = "yellow" filter = "url(#neon)">NEON</text>
</svg>
  • flood-color - цвет свечения
  • stdDeviation - приблизительный размер, более высокие значения означают меньшую интенсивность
  • slope усиливает свечение и противодействует ослаблению размытия по Гауссу. flood-opacity делает то же самое, но имеет верхний предел 1
  • если вы хотите, чтобы буквы светились, измените порядок дисков <feMergeNode>.
  • если вы хотите наложить несколько слоев свечения, как в ручке, повторите примитивы фильтра, кроме последнего <feMerge>, и добавьте их результат в том порядке, в котором вы хотите, чтобы они были в <feMerge>
09.01.2019 18:57

Да, это возможно.

Основная идея состоит в том, чтобы использовать фильтр для размытия формы, раскрасить размытую форму до вашего неонового цвета, а затем поместить ее за исходный текст.

Однако, чтобы добиться наилучшего неонового свечения, вам нужно повозиться с цветами и интенсивностью свечения. В следующем примере я использовал серию размытия разной степени, сложенную вместе, чтобы добиться лучшего эффекта. Это аналогичный подход к codepen, с которым вы связались. Но будут и другие способы сделать это.

Обратите внимание, что для простоты используемое здесь определение фильтра предполагает, что исходная форма (текст) будет белой. Он может не работать с другими цветами. Но фильтр можно настроить, чтобы обойти эту проблему.

svg {
  background-color: black;
  width: 400px;
}

text {
  font-family: Helvetica, Arial, sansserif;
  font-size: 100px;
  font-weight: 900;
  fill: white;
  filter: url(#red-glow);
}
<svg viewBox = "0 0 400 400">
  <defs>
    <filter id = "red-glow" filterUnits = "userSpaceOnUse"
            x = "-50%" y = "-50%" width = "200%" height = "200%">
       <!-- blur the text at different levels-->
      <feGaussianBlur in = "SourceGraphic" stdDeviation = "5" result = "blur5"/>
      <feGaussianBlur in = "SourceGraphic" stdDeviation = "10" result = "blur10"/>
      <feGaussianBlur in = "SourceGraphic" stdDeviation = "20" result = "blur20"/>
      <feGaussianBlur in = "SourceGraphic" stdDeviation = "30" result = "blur30"/>
      <feGaussianBlur in = "SourceGraphic" stdDeviation = "50" result = "blur50"/>
      <!-- merge all the blurs except for the first one -->
      <feMerge result = "blur-merged">
        <feMergeNode in = "blur10"/>
        <feMergeNode in = "blur20"/>
        <feMergeNode in = "blur30"/>
        <feMergeNode in = "blur50"/>
      </feMerge>
      <!-- recolour the merged blurs red-->
      <feColorMatrix result = "red-blur" in = "blur-merged" type = "matrix"
                     values = "1 0 0 0 0
                             0 0.06 0 0 0
                             0 0 0.44 0 0
                             0 0 0 1 0" />
      <feMerge>
        <feMergeNode in = "red-blur"/>       <!-- largest blurs coloured red -->
        <feMergeNode in = "blur5"/>          <!-- smallest blur left white -->
        <feMergeNode in = "SourceGraphic"/>  <!-- original white text -->
      </feMerge>
    </filter>
  </defs>

  <text x = "200" y = "200" text-anchor = "middle">RED</text>
</svg>

Было бы полезно знать, что второе последнее число feColorMatrix имеет тот же эффект, что и feComponentTransfer в моем решении, и усиливает свечение, если оно поднято.

— ccprog 09.01.2019 19:10
09.01.2019 19:00

Другие вопросы по теме

NativeScript: переворачивание логического значения через "!" в синтаксисе усов, т.е. {{! true}}
Эквивалент в JS css изменения размера, примененного к элементу SVG
Возникли проблемы с расширением Bootstrap Navigator в моем <header>
Содержимое с вкладками отображается на экране без настроек CSS всего несколько миллисекунд, а затем загружается правильно
Bootstrap текущий активный переключатель цвета элемента dom?
Как загружать изображения, не прокручивая страницу?
Адаптивная высота изображений при изменении размера
Анимация спрайта размером более 3 МБ не отображается в Firefox
Angularjs - Невозможно свернуть конкретный div при прокрутке до определенной позиции div при нажатии на определенную ссылку
Выравнивание двух div бок о бок и по горизонтали одинаковое

Похожие вопросы

Как включить ввод и кнопку из родительского компонента в angular?
Импортировать текстовый файл в модальное тело
Div с разделителем внутри?
Возникли проблемы с расширением Bootstrap Navigator в моем <header>
Автоматический выход пользователя при закрытии вкладки или закрытия браузера из диспетчера задач в codeigniter
Содержимое с вкладками отображается на экране без настроек CSS всего несколько миллисекунд, а затем загружается правильно
Как загружать изображения, не прокручивая страницу?
Адаптивная высота изображений при изменении размера
Анимация спрайта размером более 3 МБ не отображается в Firefox
Angularjs - Невозможно свернуть конкретный div при прокрутке до определенной позиции div при нажатии на определенную ссылку