Question

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

不幸的是，我只是让品牌文字发光。徽标（放大镜）没有神奇的光芒。我也尝试了一些SVG过滤器，但它没有用。

那些可以带来神奇光芒的CSS向导吗？

Codepen

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>

CSS

.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;
}

http://codepen.io/anon/pen/ByxExB

用于SVG元素的Magic Glow（文本阴影或SVG过滤器）

0 个答案: