无法让我的 css 关键帧悬停阴影动画在我的 svg 上工作

Question

我在https://codepen.io/FelixRilling/pen/qzfoc 找到了 CSS 代码，可帮助我在我正在处理的项目的文本行上创建发光的悬停效果。我现在正试图对整个 svg 文件做同样的效果。我将“文本阴影”更改为“过滤器：阴影”，但没有出现辉光/阴影。我已经能够成功定位 svg（使用基本的填充悬停效果）。我想知道这个动画是否可以在 svg 上使用，以及我的问题是否与我的 @keyframes 语法有关。有谁知道我可以如何调整它以使其在 svg 上工作？谢谢！！

CSS

#ring {
    width: 15rem;
    height: auto;
    fill: rgb(92, 92, 92);
    padding-top: 5rem;

    text-decoration: none;
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    transition: all 0.15s;
}

#ring:hover {
    -webkit-animation: neon4 1s ease-in-out infinite alternate;
    -moz-animation: neon4 1s ease-in-out infinite alternate;
    animation: neon4 1s ease-in-out infinite alternate;
    fill: rgba(255, 249, 216, 0.988);
  }

/*-- Glow Animation --*/
@keyframes neon4 {
    from {
        filter: drop-shadow(0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px rgb(252, 226, 32), 0 0 70px rgb(252, 226, 32), 0 0 80px rgb(252, 226, 32), 0 0 100px rgb(252, 226, 32), 0 0 150px rgb(252, 226, 32));
    }
    to {
        filter: drop-shadow(0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px rgb(252, 226, 32), 0 0 35px rgb(252, 226, 32), 0 0 40px rgb(252, 226, 32), 0 0 50px rgb(252, 226, 32), 0 0 75px rgb(252, 226, 32));
    }
  }

  /*-- Glow for Webkit --*/
  @-webkit-keyframes neon4 {
    from {
        filter: drop-shadow(0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px rgb(252, 226, 32), 0 0 70px rgb(252, 226, 32), 0 0 80px rgb(252, 226, 32), 0 0 100px rgb(252, 226, 32), 0 0 150px rgb(252, 226, 32));
    }
    to {
        filter: drop-shadow(0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px rgb(252, 226, 32), 0 0 35px rgb(252, 226, 32), 0 0 40px rgb(252, 226, 32), 0 0 50px rgb(252, 226, 32), 0 0 75px rgb(252, 226, 32));
    }
  }   
  /*-- Glow for Mozilla --*/
  @-moz-keyframes neon4 {
    from {
        filter: drop-shadow(0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px rgb(252, 226, 32), 0 0 70px rgb(252, 226, 32), 0 0 80px rgb(252, 226, 32), 0 0 100px rgb(252, 226, 32), 0 0 150px rgb(252, 226, 32));
    }
    to {
        filter: drop-shadow(0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px rgb(252, 226, 32), 0 0 35px rgb(252, 226, 32), 0 0 40px rgb(252, 226, 32), 0 0 50px rgb(252, 226, 32), 0 0 75px rgb(252, 226, 32));
    }
  }

内嵌 SVG

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" id= "ring"
                        viewBox="0 0 1503.000000 1584.000000"
                        preserveAspectRatio="xMidYMid meet">

                        <g transform="translate(0.000000,1584.000000) scale(0.100000,-0.100000)"
                        fill="#000000" stroke="none">
                            <path id="ring" d="M6809 14732... 53z"/>
                        </g>
                    </svg>

插入您想要的任何 svg，我的文件太大，无法在此处发布。这是我正在使用的文件：http://svgur.com/s/3wu

谢谢！

Answer 1

问题在于您的投影函数声明。 text-shadow 允许将多个阴影应用为单个规则，由逗号 , 分隔。但是，drop-shadow 函数只接受每个函数的单个阴影声明。因此，您需要在 filter 规则中将所有文本阴影声明拆分为尽可能多的 drop-shadow() 函数：

#ring:hover {
  animation: neon4 1s ease-in-out infinite alternate;
}
@keyframes neon4 {
  from {
      filter: drop-shadow(0 0 10px #fff)drop-shadow( 0 0 20px #fff)drop-shadow( 0 0 30px #fff)drop-shadow( 0 0 40px rgb(252, 226, 32))drop-shadow( 0 0 70px rgb(252, 226, 32))drop-shadow( 0 0 80px rgb(252, 226, 32))drop-shadow( 0 0 100px rgb(252, 226, 32))drop-shadow( 0 0 150px rgb(252, 226, 32));;
  }
  to {
      filter: drop-shadow(0 0 5px #fff)drop-shadow( 0 0 10px #fff)drop-shadow( 0 0 15px #fff)drop-shadow( 0 0 20px rgb(252, 226, 32))drop-shadow( 0 0 35px rgb(252, 226, 32))drop-shadow( 0 0 40px rgb(252, 226, 32))drop-shadow( 0 0 50px rgb(252, 226, 32))drop-shadow( 0 0 75px rgb(252, 226, 32));
  }
}

<svg id="ring" width="84" height="84">
  <rect stroke="black" fill="none" x="2" y="2" width="80" height="80"/>
</svg>