Css SVG元素的幻光（文本阴影或SVG过滤器）

我在品牌名称旁边有一个SVG徽标。在整个区域悬停时，会出现一道神奇的光晕

不幸的是，我只看到了品牌文字。没有魔术辉光的标志放大镜。我还尝试了一些SVG过滤器，但不起作用

有没有CSS奇才能给这带来魔力

代码笔

HTML

---

你试过什么过滤器？一个滤镜效果的阴影似乎是你想要的。我只是玩了一会儿。现在开始工作了，谢谢！

<a href="/" class="b-box">
  <svg width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" class="l">
    <path class="l-inner" d="M15.478,13.236l-3.738-3.738c0.552-0.934,0.874-2.02,0.874-3.183c0-3.466-2.81-6.275-6.275-6.275 c-3.466,0-6.276,2.81-6.276,6.275c0,3.466,2.81,6.276,6.276,6.276c1.163,0,2.248-0.323,3.182-0.875l3.731,3.73 c0.003,0.003,0.004,0.006,0.007,0.008c0.613,0.613,1.606,0.613,2.219,0C16.091,14.842,16.091,13.85,15.478,13.236z M2.259,6.315 c0-2.253,1.826-4.079,4.08-4.079c2.252,0,4.079,1.826,4.079,4.079c0,2.252-1.827,4.08-4.079,4.08 C4.085,10.395,2.259,8.567,2.259,6.315z"/>
  </svg>
  <h1 class="b">Brand Name</h1>
</a>

.b-box {
  align-items: center;
  display: flex;
  text-decoration: none;
}

.b-box:hover {
text-decoration: none;
text-shadow: 0 0 5px rgba(255, 255, 255, .7);
}

.l {
  height: 26px;
  margin-right: 15px;
  width: 26px;
}

.l-inner {fill: #fff;}

.b {
  font-family: sans-serif;
  font-size: 2.2rem;
  color: #fff;
  margin: 0;
}