html - 是否可以在 SVG 中创建发光效果-6ren

html - 是否可以在 SVG 中创建发光效果

转载作者：行者123 更新时间：2023-11-28 00:25:09

我正在学习 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;
  }
}

最佳答案

是的，这是可能的。

基本思想是使用滤镜模糊形状，将模糊的形状着色为霓虹色，然后将其放在原始文本后面。

但是，要获得最佳的 NEON 效果，您需要调整颜色和发光强度。在下面的示例中，我使用了一系列堆叠在一起的不同数量的模糊来获得更好的效果。这与您链接到的代码笔的方法类似。但也有其他方法可以做到这一点。

请注意，为简单起见，此处使用的特定过滤器定义要求原始形状(文本)为白色。它可能不适用于其他颜色。但是可以调整过滤器来解决这个问题。

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>

关于html - 是否可以在 SVG 中创建发光效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54660502/

文章推荐： css - Bootstrap DropdownButton 悬停时间过长

文章推荐： css - 在手写笔 lang css 中向数组添加值

文章推荐： php - 我的 PHP session 在我登录时给出了错误的输出

文章推荐： html - 为什么 "margin: 0;"会破坏我的 css？

html - 在文本后面绘制褪色背景/发光
我正在尝试在 HTML5 Canvas 上绘制带有背景的字符串。我以 GMail 图标为例，请看这张图片(来自实验室设置页面): 如您所见，图片中的 8 周围有白光。到目前为止，这是我尝试过的: va
jquery - 文本不透明度问题(1px 发光)
我有一个问题!我需要在文本上设置不透明度。我尝试使用 jquery: $(document).ready(function() { $(".item h2").css({ opacity: 0.5
iOS SceneKit NEON 发光
一直在研究 Scenekit 上的照明，虽然我现在可以应用照明节点来照亮某些东西，但我正在寻找一种从对象内部照明的方法。举个例子，想象一下 NEON 或将光转换到其他物体上的灯泡。有什么想法可以实
iphone - iOS:如何用一种颜色替换搜索栏背景闪耀/发光
如何从搜索栏的背景中去除光彩/发光(渐变)。我想用一种颜色替换它。来自这里: 像这样最佳答案使用 searchbar.backgroundImage = //your image here 你可
css - 围绕带有边框和颜色的 div 发光
有什么方法可以在 div 周围添加光晕吗？看看 twitter 登录，输入框周围怎么会有蓝色的光芒，可以为 div 做吗？最佳答案 CSS3 可以做到这一点 -webkit-box-shadow:0
css - 删除聚焦文本区域上的 Firefox 发光
我想不通这个。当 textarea 在 Firefox 中突出显示时，我试图摆脱那种蓝色光芒。这是我的 CSS: textarea { margin:0; padding:0;
单击时停止的 Javascript 发光/脉动效果
我有以下 Javascript 可以使文本链接持续发光/脉动。此链接显示同一页面的另一部分，因此我希望它在用户单击后停止。 $(document).ready(function()
iOS SceneKit NEON 发光
一直在研究 Scenekit 上的照明，虽然我现在可以应用照明节点来照亮某些东西，但我正在寻找一种从对象内部照明的方法。举个例子，想象一下 NEON 或将光转换到其他物体上的灯泡。有什么想法可以实
css - 使用 CSS3 按钮闪耀/发光
我有一个导航菜单，我试图仅使用 CSS3 和 HTML 重新创建它。根据所附图片上的“主页”按钮，该设计要求在当前选择的菜单按钮上发光/发光。仅使用代码就可以实现这种效果，还是我需要使用发光图像？!
javascript - 如何在 Highcharts 中悬停系列时去除标记周围的光晕/发光
我想去除那些圆圈周围的“光晕”。您看到的那些路径是发光本身，而不是带有 2px 红色和蓝色实心环的标记。因此，删除那些路径元素。 highcharts 中应该有一个设置允许我禁用/修改这个“发光”。
ios - 为shader添加bloom(发光)效果(Unity游戏引擎)
我正在 Unity game engine 中创建 iOS 应用 . 我正在尝试重写我的着色器，以便使用它的 Material >绽放(发光)效果(如 Halo component )。一个示例它的
c# - DirectX9 中的简单 HLSL 发光/模糊效果
几天来我一直在努力寻找任何资源来帮助我使用高级着色器语言和 DirectX 9 托管库编写简单的发光/模糊着色器。我需要做的就是将一系列 CustomVertex.TransformedColore
css - 移除 Safari/Chrome iframe 发光
有没有办法去除 Webkit 中 IFrame 的外发光？我试过这个: iframe {outline: none; -moz-outline: 0; border: 1px solid #000;
css - 使用 -webkit-radial-gradient 发光
我正在尝试在自定义按钮上实现悬停发光(见下图)。我在 Chrome 中玩游戏，无法通过 -webkit-radial-gradient 获得任何类似的外观。 button
html - 带有过渡的 CSS 发光(阴影？)不完全有效
这有点特殊，因此很难选择正确的标题或尝试找到已经存在的修复程序，但无论如何: 当我在网上搜索类似的东西时，我在网上找到了这个代码片段，并决定在我正在从事的元素中使用它: .text-glow:hove
jquery - 如何使用 jquery 使 div 发光
我想知道如何在页面加载后使 div 以特定颜色发光。 Registrer deg 这是我想要发光的 div。谢谢:) 最佳答案 CSS3 可以做到这一点: -webkit-box-shadow:0 0
css - 从 textarea 中删除所有样式(边框、发光)
如果可能的话，我想从文本区域中删除样式并使其全白，没有任何边框或发光。我尝试过在 SO 上找到的不同内容，但没有任何效果(尝试使用 FF 和 Chrome)。那么，这可能吗？如果可以，应该怎么做？
windows-7 - 从 Visual Studio 2012 中删除窗口阴影/发光
我正在使用 Window 7。我已经从我的窗口中删除了阴影，但 Visual Studio 2012 似乎忽略了该设置并且无论如何都会绘制阴影(或发光)。有没有办法去除那个阴影/发光？最佳答案来自
ios - 使用 Core Plot 动画(脉冲、发光)CPTPlotSymbol
我想为以下绘图符号设置动画(脉冲、发光)。实现所需行为的最佳方法是什么。谢谢最佳答案您不能为绘图符号设置动画。您可以做的是在突出显示的点上放置一个绘图空间注释。创建一个自定义的 CPTLayer
jquery - 如何 CSS 覆盖 jquery Accordion 中事件标题/选项卡的阴影/发光
我使用您出色的网站构建了 Accordion ，它取代了我新应用的 SSL 无法使用的旧 Ajax 脚本。我的审美观有问题。当 Accordion 的标题处于事件/选定状态时，它会在背景周围产生蓝色

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 是否可以在 SVG 中创建发光效果